Implist | 駆け出し後エンジニアのための理論と実装

前回は「グリッドレイアウトとは何か？」について学びました。
今回はCSSグリッドレイアウトで出てくる用語について見ていきましょう。
押させておく用語はたくさんあり、これられを使ってレイアウトを組んでいくのでしっかりと理解しておきましょう。

グリッドレイアウトの用語

書き方の前に用語を学んでいきましょう。（※簡単な書き方については次の記事で紹介します）
グリッドレイアウトで出てくる基本的な用語は以下の6つです。

1. グリッドコンテナ
2. グリッドアイテム
3. グリッドライン
4. グリッドトラック
5. グリッドセル
6. グリッドエリア

たくさんあり、ややこしいですが全体像を掴めれば理解が早まると思います。
以下の縦（青線）、横（赤線）のグリッド図を使って説明していきます。この図が土台となります。

コードは以下を例として使います。細かい内容は記事後半の「簡単なグリッドレイアウトの書き方」で説明します。

<div class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
  <div class="item5">item5</div>
</div>

グリッドコンテナ

グリッドコンテナはグリッド全体を指します。つまりグリッドレイアウトになりうる範囲全てということですね。
これらの範囲に対して、グリッドレイアウト特有の設定をすることができます。

HTMLコードでいうとclass="container"がついている部分ですね。

<div class="container">
</div>

グリッドアイテム

グリッドアイテムはグリッドコンテナ内の全ての子要素となります（※孫要素は含みません）
図にあるように、コンテナ内でグリッドアイテムは自由にどこでも配置することが可能です。

これはHTMLコードと図を照らし合わせて見た方が理解しやすいかもしれません。class="container"内の子要素なので、class="item○"が全てグリッドアイテムとなります。
ここでグリッドアイテムは5つなので、図でも5つのアイテムが配置されているのが分かると思います。

  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
  <div class="item5">item5</div>

グリッドライン

次はグリッドラインです。これは縦横の線のことなので分かりやすいかと思います。
グリッドラインは1から順番に番号が振られています。今回であれば縦に1〜5、横に1〜5の数字が振られることとなります。この番号をもとにグリッドアイテムの配置などを行ったりします。

また、振られている番号は逆順に-1〜-5とマイナスの値を指定することができます。今回であればプラスの5のラインはマイナスの-1のラインと同じということになります。

グリッドトラック

グリッドトラックは縦のグリッドラインと、横のグリッドラインの間の行や列を表します。
図では2つのグリッドトラックを表現してみましたが、このグリッドコンテナ内全てのグリッドトラックは縦4トラック、横4トラックの合計8トラックあることになります。

グリッドセル

グリッドセルは縦横のグリッドトラック同士の重なりの部分になります。今回のグリッドコンテナ内のグリッドセル合計は16個になりますね。

グリッドエリア

これはグリッドセルと近いですが、複数のグリッドトラックが重なった場所がグリッドエリアと呼ばれます。図の例だと4つのグリッドセルが1つのグリッドエリアとして表現されています。

以上でグリッドレイアウトで使用する用語は終わりです。

1. グリッドコンテナ
2. グリッドアイテム
3. グリッドライン
4. グリッドトラック
5. グリッドセル
6. グリッドエリア

これら6つの用語は次の回からどんどん出てくるので、イメージをしっかりと頭に入れておいてください。
次回は用語を交えながら、CSSで簡単でごくシンプルなグリッドレイアウトを作成していきます。