このブラウザーは display: grid-lanes に対応していないため、STEP 2 も通常の Grid で表示しています。Safari 26.4 以降で開くと、詰めて並ぶ様子を確認できます。
STEP 1
Grid では行の高さがそろう
高さの違うカードを display: grid で並べました。同じ行のカードは、その行で一番高いカードに合わせて場所を取るので、低いカードの下に空きができます。右下の角をドラッグすると、幅を変えられます。
1
2
3
4
5
6
7
8
9
10
11
12
STEP 2
空きを詰めて並べる
display: grid-lanes にすると、行の区切りがなくなります。カードは番号の順に、そのとき一番上が空いている列へ積まれます。列の数は Grid と同じく grid-template-columns で決めます。
1
2
3
4
5
6
7
8
9
10
11
12
使っている機能
display: grid-lanes- 片方の向きは Grid と同じ列、もう片方の向きは行の区切りなしで詰めて並べる。いわゆる Masonry レイアウト
grid-template-columns- 列の数と幅は、通常の Grid と同じ書き方で決める。grid-template-rows を指定すると、横向きに詰めて並べる
display: grid; display: grid-lanes;- 対応していないブラウザーは後の宣言を無視するので、通常の Grid で表示される
CSS
.lanes-masonry {
/* 対応していないブラウザーでは通常の Grid になる */
display: grid;
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
gap: 12px;
}HTML
<div class="lanes-grid lanes-masonry">
<div class="lanes-card" style="height: 6em">1</div>
<div class="lanes-card" style="height: 9em">2</div>
<div class="lanes-card" style="height: 5em">3</div>
<div class="lanes-card" style="height: 11em">4</div>
<div class="lanes-card" style="height: 7em">5</div>
<div class="lanes-card" style="height: 8em">6</div>
<div class="lanes-card" style="height: 5em">7</div>
<div class="lanes-card" style="height: 10em">8</div>
<div class="lanes-card" style="height: 6em">9</div>
<div class="lanes-card" style="height: 9em">10</div>
<div class="lanes-card" style="height: 7em">11</div>
<div class="lanes-card" style="height: 5em">12</div>
</div>