Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります
Post on:2020年11月5日
sponsors
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。
今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。
上記のMasonryレイアウトを実装しているのは、たった3行のCSSです。
※各カードの装飾は除く。
|
1 2 3 4 5 |
.grid { display: grid; grid-gap: 1em; grid: masonry / repeat(auto-fit, minmax(20em, 1fr)); } |
CSS Gridなのでレスポンシブにももちろん完全対応、各カードの並び順も期待通りに機能します。
ビューポートの幅を変えた時の見え方
実装のHTMLとCSSも非常にシンプルです。
まずはHTML、ラッパーと各カードのdiv要素にclassを与えるだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item" style="height:25em">4</div> <div class="item" style="height:20em">5</div> <div class="item">6</div> <div class="item" style="height:10em">7</div> <div class="item" style="height:15em">8</div> <div class="item">9</div> <div class="item">10</div> </div> |
Masonryレイアウトを実装するCSSは、.gridのL2-4だけです。
ポイントはgrid: masonry;とrepeat(auto-fit)で、Masonryレイアウトにアイテムを自動フィットするように配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.grid { display: grid; grid-gap: 1em; grid: masonry / repeat(auto-fit, minmax(20em, 1fr)); } .item { background: silver; height: 5em; } body { max-width: 75em; margin: 0 auto; padding: 1em; } [data-grid] { border: 1px solid; padding: 1em; } |
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」のトグルをアクティブにします。
トグルをアクティブ
※最新版ではデフォルトで、アクティブになっています。
ネタ元のツイートは、こちらから。
🔥 this is cool! Firefox is working on native CSS masonry layouts. Here's the CSS to create this screenshot:
.grid {
display: grid;
grid-gap: 1em;
grid: masonry / repeat(auto-fit, minmax(20em, 1fr));
}The numbers represent DOM order. It stacks items like this 😮 pic.twitter.com/X1pzsaDSoS
— 🎃 Josh-o-lantern (@JoshWComeau) October 22, 2020
sponsors
