【CSS】Gridレイアウトを使いこなすエンジニアはかっこいい！

概要

この記事は、Gridレイアウトの基本的な書き方をもとに、
Gridレイアウトを使う時に知らないといけないCSSプロパティについてを解説します。

Gridレイアウトのショートハンド（一括指定）ができるようなCSSについての解説はしていません。
あくまで【入門】になるので、わかりやすい・理解しやすいように 使うプロパティはわかりやすくしています。

この記事を読んで、Gridレイアウトについて理解を深めていただけると嬉しいです。

Gridレイアウトの基本的な書き方

まずはGridレイアウトの基本的な書き方をマスターしましょう。
Gridコンテナーと呼ばれる親要素の中に、Gridアイテムと呼ばれる子要素を入れてHTMLは完了です。

STEP①. 親要素をグリッドコンテナとして指定する

以下のようにHTML・CSSを記載すると、子要素が縦に並んでいる状態になります。
auto行x1列のグリットを指定していることになります。

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

CSS

.container {
  display: grid;
}

STEP②. グリットの行と列の数、サイズを指定する

行と列の数が決まっている のか 決まっていないのかでグリットの指定方法が変わります

決まっている場合 → 明示的グリット
決まっていない場合 → 暗黙的グリット

でグリットの行と列の数、サイズを指定します。

行と列の数が決まっている時の指定方法（明示的グリット）

grid-template-rows : 行のセル数とセルの高さを親要素に指定する

grid-template-rowsの場合は、行のセル数とセルのheightを同時に指定することになります。
以下のようにGridコンテナー（親要素）に指定することで、1行の高さ300pxの3行のGridを指定することができます。

grid-template-columns : 列のセル数とセルの幅を親要素に指定する

grid-template-columnsの場合は、列のセル数とセルのwidthを同時に指定することになります。
以下のようにGridコンテナー（親要素）に指定することで、1列の幅300pxの3列のGridを指定することができます。

列と行の数が決まっていない時の指定方法（暗黙的グリット）

以下のような時に、暗黙的グリットが適応され、自動配置されます。

• Gridコンテナーにgrid-template-rows grid-template-columnsが指定していない
• grid-template-rows/columnsで定義したセル数よりも、Gridアイテムが多い

grid-auto-rows : 自動で作成されるセルの高さを親要素に指定する

2x2のGridレイアウトを定義して、Gridアイテムが6つあった時に、
はみ出た分Gridアイテムを入れるセルの高さを指定することができます。

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 20px 20px;
  grid-auto-rows: 40px;
}

grid-auto-columns : 自動で作成されるセルの幅を親要素に指定する

2x2のGridレイアウトを定義して、Gridアイテムが6つあった時に、
はみ出た分Gridアイテムを入れるセルのwidthを指定することができます。

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 40px 40px;
  grid-auto-columns: 200px;
  
  grid-auto-flow: column; /* 便利上Gridアイテムをセルに配置する順番を左上から下にしている */

 }

STEP③. Gridアイテムをセルに配置する

セルにGridアイテムを配置する方法はいくつかあります。

a. GridアイテムをHTMLの上から順番にセルに配置される（デフォルト）
b. セルに名前をつけて、名前が一致する範囲に配置する
c. 子要素にライン番号を指定して配置する

上記のa~cの配置方法を使って、Gridアイテムをセルに配置していきます。

a. GridアイテムをHTMLの上から順番にセルに配置される

何も指定しなくても、１つのGridアイテムを1つのセルに配置してくれます。
2つ以上のセルを跨いで、１つのGridアイテム配置する場合は、b、cの方法を使いましょう。

b. セルに名前をつけて、名前が一致する範囲に配置する

grid-template-areas : 各セルに名前をつける

下記のようにGridコンテナー（親要素）に、指定することで各セルに名前を設定することができます。
複数のセルに同じ名前を設定することで、複数のセルを跨いで、１つのGridアイテム配置することができます。

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 20px 20px;
  grid-template-areas: "item1 item1"
                       "item2 item3";
}

grid-area : Gridアイテムをセルに配置する

下記のようにGridアイテム（子要素）に、指定することで同じ名前のセルに配置することができます。
同じセルに複数のGridアイテムを配置したい場合は、各Gridアイテム（子要素毎）に同じ名前を指定することでできます。

.item {
  grid-area: item1;
}

c. 子要素にライン番号を指定して配置する

Gridレイアウトでは、各グリッド線に ライン番号が決められており、このライン番号を使うことで、子要素を任意の位置に配置します。
以下の図は、3x2のGridレイアウトのライン番号になります。

grid-row : 行のライン番号を指定して配置する

下記のようにgrid-rowをGridアイテム（子要素）に、指定することで子要素を任意の位置に配置します

.item {
  grid-row: 1 / 3;
  /* grid-row: 初めのライン番号 / 終わりのライン番号 */
}

grid-column : 列のライン番号を指定して配置する

下記のようにgrid-columnをGridアイテム（子要素）に、指定することで子要素を任意の位置に配置します

.item {
  grid-column: 2 / 3;
  /* grid-colum: 初めのライン番号 / 終わりのライン番号 */
}

まとめ

この記事は、Gridレイアウトの基本的な書き方をもとに、Gridレイアウトを使う時に知らないといけないCSSプロパティについて解説しました。

この記事を読んで、Gridレイアウトについて理解を深めていただけたなら嬉しいです。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。