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

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。

[coliss]

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

[kuracom]

2023年2月現在、まだ採用0 https://caniuse.com/mdn-css_properties_grid-template-rows_masonry

[kots]

css grid responsive

[schrift]

“2020年11月現在、Firefox Nightlyのみ動作します。”

[ryota_33]

わ

[rabzombie]

待ち遠しい

[spark7]

grid便利