移行中の知識
グリッド
Grid
定義
グリッド（grid）とは、要素を配置・整列するために、column、row、margin、gutter、moduleなどの反復する空間関係を組み立てたlayout frameworkです。見える罫線そのものではなく、複数要素の位置と幅に共通する基準を与える仕組みです。整列や反復を助けますが、すべての要素を同じcellへ閉じ込めるための規則ではありません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
ECのcategory page
レスポンシブな商品一覧
見るポイント
viewport幅ごとにcard列数を変えても、outer marginとgutter、card widthの関係を共通ルールで保つ。単にcolumn数を増減するだけでなく、contentの最小幅と余白のバランスを確認し、component自身の利用可能幅で変形した方がよい場合はContainer Queryも検討する。
長文editorial layout
記事ページの本文と図版
見るポイント
本文columnを基準にしつつ、大きな図版やpull quoteだけgridを跨いで配置する。breakoutを例外ではなく、基準線との関係が分かる意図的な変化として扱う。PCとmobileでcolumn数が変わっても、同じ視覚関係を機械的に縮小せず再構成する。
理解
理解のポイント
- gridは複数要素へ共通するalignmentとspacingの基準を与え、layout全体の秩序や反復可能性を支えうる。
注意
誤解しやすい点
- グリッドを画面上に見える罫線やCSS Gridという実装手段だけと同一視する。
- すべての要素を同じcolumn幅へ収めるほど整ったdesignになると考え、強調やcontent差を失う。
- breakpointごとのcontent要件を見ず、desktop gridをそのまま縮小してmobileへ適用する。
- deviceごとに完全に別のgridを作り、共通するalignmentやspacingの意図まで失う。
関連
関連する概念
出典