概要
サイズの異なる画像をタイル上に並べる際に、 column-gap
と column-count
が使えるということを知ったのでメモ。
タイル上と言っているのはこんな感じ↓の画像の配置のこと。
本記事の内容は下記のページの焼き直し。
HTML + JS
下記は 100px から 400px までのランダムな大きさの画像を 25枚並べているだけ。
<div id="photos" class="photo"></div>
function getRandomSize(min, max) { return Math.round(Math.random() * (max - min) + min); } for (var i = 0; i < 25; i++) { var width = getRandomSize(100, 400); var height = getRandomSize(100, 400); $('#photos').append('<div class="item"><img src="//placehold.jp/'+width+'x'+height+'.png" alt="sample image"></div>'); }
CSS(SCSS)
適用する css (簡単のため scss )は以下。
.photos { column-gap: 0; column-count: 4; line-height: 0; width: 100%; .item { padding: 1px; img { width: 100%; height: auto; } } }
column-gap
と column-count
を使う。
column-gap
でカラムとカラムの間を 0px とし、
column-count
で列数(今回では4)を指定する。
基本的にはこれだけでタイル上に画像が並ぶ。 あとは、細かいスタイル修正を行えばok
例えば、 line-hight を 0 として縦間隔を狭めたり、padding をとって間をあけたりなど。 画像に対しては縦横比を揃えたまま表示するようにしておく。
参考:
column-gap (grid-column-gap) - CSS: カスケーディングスタイルシート | MDN
column-count - CSS: カスケーディングスタイルシート | MDN