編集

Introducing CSS Grid Lanes

#CSS

CSS Working Groupでの長年の議論の末、Masonryレイアウトの仕様が「CSS Grid Lanes」として合意された。 WebKit（Safari）だけでなく、Chrome、Edge、Firefoxもこの新しい仕様（display: grid-lanes）へ移行・実装を進めている。

従来のMasonryレイアウトの提案から、display: grid-lanes という新しいdisplay値を使用する形式に変更された。 Safari Technology Preview 234で先行して利用可能となっている。

display: grid-lanes でコンテナを定義し、grid-template-columns または grid-template-rows でレーンを定義する。 アイテムは自動的に空いているスペース（レーン）に配置される。 flow-tolerance プロパティ（旧 item-tolerance）で配置の許容値を調整できる。

css
.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

出展：

編集