解説
.bl_gridクラスを付与した要素の直下の子要素をグリッド状、タイル状に並べます。数に限りはありません、子要素があるだけ左から右方向に並びます。直下の子要素の幅を全て揃えます、同じ1行に並ぶ子要素同士の高さも揃えます。.bl_gridクラスを付与した要素の幅のある限り並べ、いっぱいになったら次の行に並びます。
直下の子要素の大きさは、最小値が決まっており、最小値以下にならないように計算して同じ1行に並ぶ要素の数を調整します（かしこい！）
見本レイアウト（デフォルト値）
- グリッドアイテム1
- グリッドアイテム2
- グリッドアイテム3
- グリッドアイテム4
- グリッドアイテム5
CSS
.bl_grid {
display: grid;
gap: var(--bl--grid--gap, var(--global--horizon-gap));
grid-template-columns: repeat(auto-fit, minmax(min(var(--bl--grid--minimum, 10rem), 100%), 1fr));
}
.bl_grid:where(ul, ol) {
padding-left: 0;
list-style: none;
}
.bl_grid > *:only-child {
max-width: var(--bl--grid--minimum, 10rem);
}
固有のCSS変数
--bl--grid--gap
グリッドアイテム同士の「ギャップ（余白）」を決めます。X方向、Y方向で別々の値を設定できます。
デフォルト: var(--global--horizon-gap)
設定例 --bl--grid--gap: 1em 2em;
--bl--grid--minimum
グリッドアイテムの「最小の大きさ」。パーセントは適さない。
デフォルト: 10rem
設定例 --bl--grid--minimum: 15rem;
よくある質問
- カラムレイアウトとどちらを使うべき？
- カラムレイアウトモジュールは、Flexレイアウトを採用しています。Flexレイアウトは基本的に「1行に複数の要素をインライン方向に並べる」に適したレイアウトと理解しています。
「1行に決まった分のアイテム」ならばFlexレイアウト＝カラムレイアウト、「複数行に渡って不定数のアイテムを並べる」ならグリッドが適していると思います。