生徒CSSのグリッドの使い方がよくわかりません
先生CSSのグリッドレイアウトについて説明します
グリッドは2次元のレイアウトを定義する
CSSのグリッドは、WEBページのレイアウトを列と行の2次元で定義します。
グリッドのメリット
グリッドレイアウトには以下のメリットがあります。
- HTMLをシンプルにできる
- レイアウトを自由に定義できる
- レスポンシブ対応がしやすい
グリッドはCSSだけで領域や並び順などを指定できるので、フレックスボックスに比べてHTMLがシンプルをシンプルにできます。
グリッドは、フレックスボックスなどと比べてレイアウトの自由度が高いです。
列ごとや行ごとに違うレイアウトを簡単に書くことができます。
グリッドは、アイテムの順番の変更や、位置の調整を簡単に行うことができます。
画面サイズごとに配置を変えるレスポンシブ対応を簡単に書くことができます。
グリッドの構成要素
グリッドの以下の要素で構成されます。
- コンテナ（グリッド全体）
- ライン（グリッドの縦横の区切り線）
- セル（グリッドの最小単位）
- エリア（グリッド内の範囲）
- アイテム（グリッド内に配置した要素）
コンテナ
グリッド全体を囲む要素をコンテナと言います。
ライン
グリッド内の各要素の境界を表す縦方向および横方向の線をラインと言います。
ラインの番号
縦方向および横方向のラインには番号が以下のように割り振られています。
- コンテナの上端および左端の
ラインから1, 2, 3・・・の番号を持つ - コンテナの下端および右端の
ラインから-1, -2, -3・・・始まりで負の方向の
トラック
グリッド内のラインに挟まれた列および行をトラックと言います。
列トラックや行トラックを定義しないと、コンテナ内のアイテムは何の変化も無く並ぶだけです。
列トラックや行トラックを定義するとラインやセルができて、アイテムがセルに従って配置されます。
セル
グリッドを水平方向のラインと垂直方向のラインで分割した最小単位をセルと言います。
グリッドで何も指定していなかったり、グリッドの列や行がアイテムに対して足りない場合でも、セルはアイテムの分だけ自動的に生成されます。
エリア（領域）
1つまたは複数のセルをエリアとして定義して、名前を付けることができます。
エリアをアイテムの配置先に指定することもできます。
アイテム（要素）
コンテナの直接の子要素アイテムと言います。
アイテムは特に指定しないとセルごとに1個ずつ配置されます。
ガター（溝）
グリッドのトラックとトラックの間のすき間をガターと言います。
ガターは、トラックとトラックの間のラインにも見えますが、要素ではなくすき間で、色を指定したりすることはできません。