§08-04Content
Masonry グリッド
高さの違うタイルを隙間なく敷き詰めて並べる。
縦横比の異なる画像やカードを余白なく並べ、一覧の密度を高める。写真やピン留めのように、サイズを揃えられない内容の一覧に向く。
実装のポイント
CSS columns と break-inside: avoid で手軽に組めるが、並び順が縦方向になる。横方向の順序が必要なら JS で列ごとの高さを比較して振り分ける。
- 特徴
- CSS のみ
§08-04Content
高さの違うタイルを隙間なく敷き詰めて並べる。
縦横比の異なる画像やカードを余白なく並べ、一覧の密度を高める。写真やピン留めのように、サイズを揃えられない内容の一覧に向く。
CSS columns と break-inside: avoid で手軽に組めるが、並び順が縦方向になる。横方向の順序が必要なら JS で列ごとの高さを比較して振り分ける。