グリッドレイアウト一旦開発完了

クラス名

bl_grid

マークアップ例

<ul class="bl_grid">
	<li></li>
	<li></li>
</ul>
<!-- /.bl_grid -->

定義

.bl_gridクラスを付与した要素の直下の子要素（グリッドアイテム）をグリッド状、タイル状に並べます。グリッドアイテムの数に限りはありません、あるだけ左から右方向に並びます。
グリッドアイテムの幅を全て揃えます。同じ1行に並ぶ子要素同士の高さも揃います。
.bl_gridクラスを付与した要素の幅のある限り並べ、いっぱいになったら次の行に並びます。
直下の子要素の大きさは、最小値が決まっており、最小値以下にならないように計算して同じ1行に並ぶ要素の数を調整します（かしこい！）

解説・デモ1

問題点：
グリッドアイテムが少なすぎる時のレイアウトが想定外になる可能性がある。
※アイテムが1つしかない時に最大値を「最小の大きさ」にする対策を追加
コンテナクエリが使えるようになったら、中身のモジュールで対応する方法があるかも？

機能
要素をグリッドに配置

あしらい・振る舞い

グリッドアイテムの幅を揃え、同じ1行の高さを揃える。
最小の大きさが決まっており、それ以下にならないように計算して並ぶ。

特記事項
直下の子要素に、img, ifame, video などは避ける。

変数とデフォルト値

--bl--grid--gap: var(--global--horizon-gap);
--bl--grid--minimum: 10rem;

ファイルパス

Change Log

1. 開発開始：2021-10-12
2. 2022-07-15　大幅に仕様変更
3. 2023-02-14　グリッドアイテムが1つの時のパッチ
4. 最終更新：2023-02-14