人気の「メイソンリー」レイアウトは、CSS Gridの一部にすべきか否か？あなたの意見を聞かせてください

4月20日、WebKitブログで「CSS Grid Level 3、別名"Masonry"レイアウトを発明しよう」と題した記事が公開された。この記事では、ウェブページのレイアウト手法としての「メイソンリーレイアウト」の現状について詳しく紹介されており、開発者からの意見を広く集めている。以下に、ポイントを絞って内容を紹介する。

メイソンリーレイアウトの概要
CSS Grid Level 3におけるメイソンリーレイアウトの進化
メイソンリーレイアウトを巡る議論

メイソンリー（Masonry）レイアウトの概要

メイソンリーレイアウトとは、異なるアスペクト比のコンテンツを一列に並べることなく、煉瓦や石の壁のようにパッキングするレイアウト手法だ。以下の画像を見れば一目瞭然だろう。

これにより、コンテンツを均一な長方形に切り取ることなく、それぞれのパーツを流れるように表示させることが可能である。このレイアウトは、見やすく、おしゃれで、レスポンシブなため、非常に人気がある。しかし、その実装には複雑なJavaScriptを必要とするため、実装面でもパフォーマンス面でもリスクを抱えることになるのが、普及を妨げている要因だった。

現状: CSS Grid Level 3での試験的な運用

CSS Grid Level 1と2では、ウェブデザインにおける多くの制限を解消したが、全てのデザイナーの要求を満たすわけではなかった。2020年にMozillaによって初めて提案されたメイソンリーレイアウトは、CSS Grid Level 3の一部として実装されることになり、より創造的で複雑なレイアウトが可能になった。Appleもこの提案をサポートし、Safari Technology Previewでデフォルトで実装を開始している。

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  grid-template-rows: masonry; /* 注目❢*/
}

このgrid-template-rows: masonryルールはブラウザに「行を作成しないでください。代わりに、コンテンツを石積み/滝のようなパターンで流し込んでください」という指示を与える。

このたった4行のCSSにより、メイソンリーレイアウトが実現できる。

メイソンリーレイアウトはCSS Gridの一部とするべき？も独立した表示タイプとするべき？

メイソンリーレイアウトをCSS Gridの一部とするべきか、それとも独立した表示タイプとするべきかについては意見が分かれている。

独立した表示タイプとする場合は、以下のようにdisplayプロパティを拡張する案が提案されている。

display: block;
display: inline;
display: flexbox;
display: grid;
display: masonry; /* New! */

独立した表示タイプとすることの利点は、ブラウザによる実装が単純化されることだ。
こちらの方針では、おそらくマルチカラムレイアウトをベースに議論が進められる。既存のCSS Grid仕様との整合性を取る必要がなく、単純な仕様から始められるので、早期に実装が安定し、実用化が早まるという利点が見込めるかもしれない。

一方で、既存のCSS Grid仕様との様々な組み合わせを用いた、柔軟な指定を行えなくなる可能性がある。
例えば、マルチカラムをベースとした仕様では、コンテンツを複数の列にまたがらせるなどの指定は行えなくなる可能性が高い。

AppleのデベロッパーはCSS Gridベースでの仕様策定を望んでいるものの、いちばん重要なのは実際のWebデザイナーや開発者の意見だとしており、この新しい機能に関するコミュニティの意見を広く求めている。
あなたもこの議論に参加してみてはいかがだろうか？

詳細はHelp us invent CSS Grid Level 3, aka “Masonry” layoutを参照していただきたい。