移行中の知識
カラムグリッド
Column Grid
定義
カラムグリッド（column grid）とは、formatを複数の縦方向columnへ分け、textやimageなどを一つまたは複数columnの幅へ対応させて配置するgrid typeです。column間のgutterと外周marginを含む関係として扱い、CSS Gridのcolumn syntaxそのものとは区別します。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
editorial spread
雑誌の複数段組
見るポイント
本文、caption、imageが同じ複数column基準を共有し、要素ごとに1列・2列・複数列をspanしている構造をcolumn gridとして見る。
desktop web application
dashboardのresponsive layout
見るポイント
wide viewportでcontent areaを複数columnへ分け、panel幅をcolumn spanで組み立てている時、実装方法とは別にlayout structureとしてcolumn gridを観察する。
注意
誤解しやすい点
- column gridを12-columnだけのsystemだと考える。
- CSSのgrid-template-columnsを使っていれば必ずcolumn grid designだと考える。
- column数だけを見て、gutter・margin・spanの関係を無視する。
関連
関連する概念
出典