2020年11月5日(木)

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

• 0
• 188
• 91
• 145

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

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