Native CSS Masonry Layout In CSS Grid
BRANK
There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.
3 comments
Pinterest で採用されているレイアウト（Masonry Layout というらしい）か、CSS Grid だけで実現できるようになる。グリッドのコンテナ要素に display: grid; に加えて grid-template-rows: masonry; を指定する。
つい最近、Pinterestで使わていたMasonry Layoutって昔は頑張ってJSでやってたけど、今はCSSだけで簡単に出来るのかなと思う機会があったんだけど、出来るらしい。
Grid Layoutで
grid-template-rows: masonryという指定ができるとか。他のCSSで頑張ってやるテクニックもあったけど、これはどのぐらい柔軟に出来るのか興味はある。今はFirefox nightlyでフラグをオンにしないと使えないようだけど楽しみ。Masonrがcss gridだけで簡単にできるようになるとか胸熱！まだFirefixのnightlyだけらしいけど、標準化はどのくらい進んでるんだろう。
調べてみると css-grid-3 のドラフトで盛り込まれてるんですね。まだどのプロパティで指定するかなどは議論されてるようです。