グリッドレイアウトのデモ

デフォルト値のままのサンプル

グリッドアイテムがひとつの時

一応、無駄に広がることはない

グリッドアイテムが2つの時

だいたい幅の半分を占める

変数変更のサンプル

2列ぐらいに調整

ついでに、gapの値をclamp()で設定してレスポンシブに。

CSS変数の設定値

.un_grid2column {
	--bl--grid--gap: clamp(2rem, calc(5% + 1rem), 4rem);
	--bl--grid--minimum: 20rem;
}