Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。

今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。

Masonryレイアウトがたった3行のCSSで実装できるようになります

上記のMasonryレイアウトを実装しているのは、たった3行のCSSです。
※各カードの装飾は除く。

CSS Gridなのでレスポンシブにももちろん完全対応、各カードの並び順も期待通りに機能します。

シンプルなCSSで、Masonryレイアウトを実装

ビューポートの幅を変えた時の見え方

実装のHTMLとCSSも非常にシンプルです。
まずはHTML、ラッパーと各カードのdiv要素にclassを与えるだけです。

Masonryレイアウトを実装するCSSは、.gridのL2-4だけです。
ポイントはgrid: masonry;repeat(auto-fit)で、Masonryレイアウトにアイテムを自動フィットするように配置します。

Masonryレイアウトの仕様によると、masonry値でCSS GridでMasonryレイアウトがサポートされるとのことです。repeat(auto-fit)は、masonry値の場合にrepeat(auto-fill)のように振る舞い、各アイテムはレイアウトサイズに依存して自動配置されます。

実際の動作は、下記をご覧ください。
※2020年11月現在、Firefox Nightlyのみ動作します。

See the Pen
CSS Masonry Layout (FF Nightly - Feature Flag)
by Miriam Suzanne (@mirisuzanne)
on CodePen.

Firefox Nightlyのダウンロードは、下記ページから。
grid: masonry;を機能させるには、設定を少し変更します。

サイトのキャプチャ

Firefox Nightly

アドレスバーに「about:config」と入力すると、「高度な設定」が表示されるので、「layout.css.grid-template-masonry-value.enabled」のトグルをアクティブにします。

サイトのキャプチャ

トグルをアクティブ
※最新版ではデフォルトで、アクティブになっています。

ネタ元のツイートは、こちらから。

sponsors

top of page

©2020 coliss