ウェブ制作の現場で長年待ち望まれてきたマソンリーレイアウトが、CSSの標準機能としてついに実用段階に近づいている。CSS Grid Layout Module Level 3の仕様でマソンリーレイアウト（grid-lanes layoutとも呼ばれる）が定義され、2026年にはSafari 26が最初にこの機能を搭載したことで、制作現場にとって大きな転換点となりそうだ。

マソンリーレイアウトとは何か

マソンリーレイアウトは、一つの軸で通常のグリッドレイアウトを使い、もう一つの軸でスタック（積み重ね）レイアウトを使う手法で、石の組積工事のように要素が配置されることから「マソンリー」と呼ばれ、「ウォーターフォールレイアウト」とも呼ばれる。高さの異なるカードや画像を縦に並べる際、従来のグリッドレイアウトでは大きな空白が生まれてしまうが、マソンリーレイアウトではより短いアイテムの後に残る隙間を埋めるように、次の行のアイテムが上に詰めて配置される。

これまではCSS Gridが登場して以降の7年間、マソンリーレイアウトを実現する方法がなかった状態で、制作者はJavaScriptライブラリやCSSのcolumnプロパティを使った回避策に頼ってきた。しかしcolumnを使った手法には、項目が垂直方向に並ぶため視覚的順序とDOM順序が一致せず、アクセシビリティの問題があった。CSS Grid Lanesはこの問題を解決し、DOM順序を保持する。

技術仕様と実装方法

最も一般的なマソンリーレイアウトを作成するには、`display: grid-lanes`と`grid-template-columns`を組み合わせて使う。基本的な構文は、`display: grid`、`grid-template-columns: repeat(3, 1fr)`、そして`grid-template-rows: masonry`を指定するだけで実現できる。この単純さは、複雑なJavaScriptソリューションと比較して大きなアドバンテージとなる。

この設定により、コンテナの子要素は積み重ね軸に沿ってマソンリーアルゴリズムに従って配置され、各行の項目は最も余裕のある列に配置される仕組みになっている。興味深いのは、通常のグリッドと同様に複数のトラックにまたがる項目も配置でき、利用可能なスペースを可能な限り埋める方法で自動配置される点だ。

ブラウザサポートの現状と今後

2026年初頭の時点で、ブラウザサポートはまだ実験的で、エンジン間で一貫していない。Safari Technology Previewが最も完全なプロトタイプ実装を持ち、Chromiumベースのブラウザはフラグ付きで実験的な実装を行い、Firefoxも設定フラグの後ろで実験を実装している。Safari 26が最初に安定版で搭載し、ChromeとFirefoxも2026年中に安定版サポートの提供が予定されている。

実用面での重要な注意点として、フォールバック無しにマソンリースタイルのGrid構文を本番環境に投入すべきではない。@supportsを使った段階的強化戦略により、サポートしていないブラウザでは標準的なCSS Gridにフォールバックできる。この手法を使うことで、現在でも安全に実験を開始できる。

制作現場への影響と今後の展望

マソンリーレイアウトの標準化は、特に画像ギャラリー、ブログの記事一覧、商品カタログなどの用途で制作現場に大きなインパクトを与える見込みだ。異なるアスペクト比のコンテンツを扱え、すべてを均一な矩形に切り取る必要がなくなる利点は、より自由度の高いデザイン表現を可能にする。

ただし、この機能がCSS Gridの一部であるべきかどうかについては議論が続いており、独立した`display: masonry`として実装すべきという意見もある。このような根本的な議論があるため、どのブラウザも本格的な実装に踏み切れない状況で、CSS Working Groupでのコンセンサス形成が必要とされている。

地方の制作会社でも、@supportsを使った段階的強化のアプローチにより、今日からコードを書き始めることができ、ブラウザサポートの拡大に合わせてレイアウトが改善される。つくばのような地域でも、この新しい技術を活用したより魅力的なウェブサイトが作れる時代が近づいている。