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.

smashingmagazine.com
Related Topics: CSS Web Standards / Browsers
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 のドラフトで盛り込まれてるんですね。まだどのプロパティで指定するかなどは議論されてるようです。