[詳説] CSSグリッドレイアウトで使うプロパティ一覧

CSSグリッドレイアウトには専用のCSSプロパティがあります。
似たような字面のプロパティががいくつもあるので、紛らわしくてわかりにくいと感じませんか？

そこで、CSSグリッドレイアウトで利用する各プロパティを一つずつていねいに解説していきます。
イチから覚えるのに、ブックマークして忘れた時の辞書代わりに、ご活用ください。

※そもそもグリッドレイアウトについての理解に自信がない方は、CSSグリッドレイアウトの基本知識と作り方を理解しておきましょう。プロパティも覚えやすくなります。

※IEでグリッドレイアウトを使うための独自プロパティの解説はこちら

display

display: grid or inline-grid;

グリッドコンテナとなる要素に記述します。
値には grid または inline-grid を指定します。

グリッドコンテナを指定すると、その子要素はグリッドアイテム要素として扱われます。

<div class="contaier">
  <div class="item">グリッドアイテム1</div>
  <div class="item">グリッドアイテム2</div>
  <div class="item">グリッドアイテム3</div>
  <div class="item">グリッドアイテム4</div>
</div>

.grid-container {
  display: grid;
}

コンテナ要素内には暗黙のグリッドが自動で作成されますが、表示上は何も変わりません。

グリッドトラックを定義し、グリッドアイテムの配置を指定していくことで、任意のグリッドレイアウトを組み立てていきます。

grid-template-rows, grid-template-columns

grid-template-rows: 行のトラックサイズ…;
grid-template-columns: 列のトラックサイズ…;

グリッドロウ（行）とグリッドカラム（列）の構成（グリッドトラック）をそれぞれ定義します。
グリッドコンテナ要素に指定します。

grid-template-rows は必要な行数分のトラックサイズ（高さ）を半角スペースで区切りながら記述します。上の行 → 下の行の順に行サイズを指定します。

grid-template-columns は必要な列数分トラックサイズ（横幅）を半角スペースで区切りながら記述します。左列 → 右列の順で列のサイズを指定します。

作成されたグリッドトラックに応じてグリッドラインが作成され、正と負の番号が割り当てられます。

.container {
  display: grid;
  grid-template-rows: 150px 300px 150px;
  grid-template-columns: 100px 1fr 200px; 
}

グリッドラインに名前をつける

grid-template-rows: [ライン名] 行のトラックサイズ [ライン名]…;
grid-template-columns: [ライン名] 列のトラックサイズ [ライン名]…;

グリッドラインには任意の名前を付けることができます。

ライン名は [ ] で囲み、実際のグリッドの構成と同じ順序で記述します。

.container {
  display: grid;
  grid-template-rows: [top] 150px [middle] 300px [middle] 150px [bottom];
  grid-template-columns: [left] 100px [main content] 1fr [main] 200px [right];
}

ライン名には、同じ名前のものが複数存在してもかまいません。

同一名のラインを区別してアイテムを配置するには、ライン名の後に数字で順番を記述します。

上記コードサンプルで、行方向の重複するライン名 middle のうち、2つ目の middle に配置したいなら、グリッドアイテムに grid-row-start: middle 2; のように記述します。

また、1つのラインに対して複数のライン名を付けることもできます。
その場合は、[main content] のように、[ ] 内でライン名を半角スペースで区切ります。

grid-template-areas

grid-template-areas: "行の各セルのエリア名"…;

グリッドエリアを作成します。
指定先はグリッドコンテナ要素です。

値は、グリッドセルごとにエリア名を半角スペースで区切りながら記述し、行ごとに ' ' (クオーテーション) または " " (ダブルクオーテーション) で囲みます。

エリア名は任意で付けられますが、最初の一文字目を半角数字から始めることはできません。

.container {
  display: grid;
  grid-template-rows: 150px 300px 150px;
  grid-template-columns: 100px 1fr 200px; 
  grid-template-areas: "header header header"
                       "main main side"
                       "footer footer footer";
}

※コードサンプルは視覚的にエリア配置をわかりやすくするために改行して位置を揃えています。

グリッドセルの数だけエリア名を記述しますが、名前を付けなくてよいエリアがあれば、該当する箇所に1つ以上の . (ピリオド) を記述することでエリア名を省略できます。

.container {
  grid-template-areas: "area1 area2 ....." "area3 ... area4";
}

グリッドエリア名に応じて自動でつけられるライン名

グリッドエリアを作成すると、エリアを区切るラインに対して自動的に名前が付与されます。

命名ルールは、エリアの開始線が「エリア名-start」、エリアの終了線が「エリア名-end」となります。

例えば「main」というグリッドエリアだったら、開始位置にあるラインに「main-start」、終了位置にあるラインに「main-end」という名前が付けられます。

したがって、エリアの境界線にあるラインには複数のライン名が付与されることになります。

自動で付けられたライン名は、グリッドアイテムを配置する際に利用できます。

grid-template

grid-template: グリッドロウの指定 / グリッドカラムの指定;

grid-template-rows, grid-template-columns, grid-template-areas をまとめて指定できるプロパティです。

行方向の指定を記述し、/ (スラッシュ) で区切って列方向の指定を記述します。

グリッドトラックのみのショートハンド、トラックとエリアのショートハンド、トラックとエリアとライン名のショートハンドなど任意のパターンで記述できます。

トラック・エリア・ライン名をまとめた記述例
.container {
  grid-template: [top] "area1 area1" 100px [middle] "area2 area3" 300px [bottom] / [left] 1fr [center] 2fr [right];
}

参考：grid-template – CSS

grid-row-start, grid-row-end, grid-column-start, grid-column-end

grid-row-start: 行の開始位置;
grid-row-end: 行の終了位置;
grid-column-start: 列の開始位置;
grid-column-end: 列の終了位置;

grid-row-start と grid-column-start でグリッドアイテムの開始位置となるラインを指定し、grid-row-end と grid-column-end で終了位置のラインを指定します。

プロパティの指定先は各グリッドアイテム要素です。

値には正または負のライン番号、ライン名、使用するセル数を示す span で指定できます。

.grid-item1 {
  grid-row-start: 1;
  grid-row-end: -1;
  grid-column-start: span 3;
  grid-column-end: right;
}

使用するグリッドセルの数で指定する単位 span

「開始位置または終了位置までグリッドセルを○個分使用して配置する」という指定方法が span を用いた記述です。

プロパティ値に span セル数 と記述します。

例えば、「行のライン番号1からセル2個分（ライン番号3まで）のエリアで配置する」という記述なら以下のようになります。

開始位置からの指定
.grid-item1 {
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column-start: 3;
  grid-column-end: -1;
} 終了位置からの指定
.grid-item1 {
  grid-row-start: span 2;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: -1;
}

開始位置からのセル数、終了位置までのセル数のどちらで指定しても同じく配置できます。

grid-row, grid-column

grid-row: grid-row-startの値 / grid-row-endの値;
grid-column: grid-column-startの値 / grid-column-endの値;

grid-row プロパティを利用すると grid-row-start と grid-row-end をまとめて記述できます。

同様に grid-column プロパティで grid-column-start と grid-column-end をまとめられます。

開始位置の値と終了位置の値の間は / (スラッシュ) で区切ります。

.grid-item1 {
  grid-row: 1 / 3;
  grid-column: 2 / span 3;
}

grid-area

grid-area: グリッドエリア名;
grid-area: grid-row-startの値 / grid-column-startの値 / grid-row-endの値 / grid-row-endの値;

エリアベースまたはラインベースのどちらの指定にも利用できるアイテム配置用プロパティです。
グリッドアイテム要素に指定します。

エリア名でアイテムを配置する場合は、grid-template-areas で作成しておいたエリア名を値に指定します。

ラインベースで配置するには、行と列の開始位置・終了位置まとめて4つの値を / (スラッシュ) で区切って指定します。値の順番に注意しましょう。

エリアベースでの指定
.grid-item1 {
  grid-area: header;
}ラインベースでの指定 .grid-item2 {
  grid-area: 1 / 2 / 3 / 3;
}

row-gap(grid-row-gap), column-gap(grid-column-gap)

grid-row-gap: 行間の余白サイズ;
grid-column-gap: 列間の余白サイズ;

grid-row-gap で行間の余白を、grid-column-gap で列間の余白のサイズをそれぞれ設定します。
グリッドコンテナ要素に指定します。

grid-row-gap, grid-column-gap, grid-gap はいずれもグリッドトラック全体に適用されるため、特定のトラックのみの余白は設定できません。

トラックやアイテムごとに細かく余白を調整したい場合は、marginプロパティ等を利用したり、余白用のグリッドトラックを定義するなどします。

.container {
  grid-row-gap: 10px;
  grid-column-gap: 30px;
}

gap(grid-gap)

grid-gap: 行間の余白サイズ 列間の余白サイズ;
grid-gap: 行間と列間の余白サイズ;

grid-row-gap と grid-column-gap をまとめて記述できるプロパティです。

行と列にそれぞれ異なる余白サイズを記述する場合は、行間の余白サイズの後に半角スペースを空けて列の余白サイズを記述します。

余白サイズを1つのみ記述した場合は、行間と列間に同じ余白サイズが設定されます。

grid-auto-flow

grid-auto-flow: 自動配置の方向;

グリッドの自動配置の方向を指定します。
指定先はグリッドコンテナ要素です。

値は row または column で、行方向か列方向のいずれかを指定します。
初期値は row です。

.container {
  grid-auto-flow: column;
}

自動配置アルゴリズムの指定

grid-auto-flowでは、自動配置アルゴリズムの変更もできます。

全てのアイテムに配置指定がなければ行方向に順に配置されていくだけですが、配置指定のあるもの・配置指定のないもの・部分的に配置しているもの、これらが混在している場合、空のセルエリアができてしまうことがあります。

これは、sparseというアルゴリズムが初期値のためです。

denseアルゴリズムに切り替えることで、空いているスペースをできるだけ埋めるようにアイテムを配置していくことができます。

アルゴリズムを変更するには値に dense を追記します。

.container {
  grid-auto-flow: row dense;
}

参考：CSS Grid Layout moduleの自動配置アルゴリズムのしくみを理解する

grid-auto-rows, grid-auto-columns

grid-auto-rows: トラックサイズ;
grid-auto-columns: トラックサイズ;

自動で作成されるグリッドのトラックサイズを指定します。
指定先はグリッドコンテナ要素です。

初期値は auto なので、アイテムの内容に応じたサイズで処理されます。

.container {
  grid-auto-rows: 100px;
}

値には複数のトラックサイズを記述できます。
複数の値がある場合は、記述順にトラックサイズが繰り返し処理されていきます。