CSSだけでMasonryレイアウト（組積レイアウト）をする

いままでMasonryレイアウト（組積レイアウト）をするにはJavaScriptが必須（jQueryのプラグインとか）だったが、Gridレイアウトの機能でCSSだけで実現できるようになった。

.masonry {
  display: grid;
  gap: 10px;
  /* grid-template-(rows|columns): masonry が指定可能 */
  grid-template-rows: masonry;
}

追記:2024-04-24

• Safari TPがMasonryレイアウトをサポートした。
• Firefoxはlayout.css.grid-template-masonry-value.enabledを有効にすることで利用可能

追記:2024-05-08

Chromeの開発チームがCSS Gridを使ったMasonryレイアウトの実装に反対の意を示した。

反対の理由

1. パフォーマンス問題
2. Grid ではなく別のレイアウトにすべき

Chromeチームの提案

CSS Gridの機能ではなく、display: masonryでフローレイアウトの役割のひとつとして実装することを提案している。

.masonry {
  display: masonry;
}

追記: 2024-09-26

CSS Grid Level 3のWorking Draftが公開された。

grid-template-rows: masonryとdisplay: masonryの2つの提案があり、ユーザーにフィードバックを求めている。