CSS Gridでレイアウトする時はこのプロパティが重要！「grid-template-」と「grid-auto-」の使い方を解説

Post on:2018年10月18日

CSS Gridのレイアウトで混乱させる2つのプロパティ

CSS Gridのレイアウトで私を混乱させるプロパティは「grid-template-*」と「grid-auto-*」です。特に「grid-template-rows/columns」と「grid-auto-rows/columns」の相違は名称が似ているだけで、機能はまったく異なります。

これらは明示的と暗黙的なグリッドシステムに関係があることは知っていましたが、額面ではほぼ同じことをしているように思っていました。しかし実際には共通点はほとんどなく、それぞれ別のことを達成するために使用されます。

明示的および暗黙的なグリッドシステムとは

「grid-template-*」と「grid-auto-*」プロパティの違いを理解するためには、最初に明示的なグリッドと暗黙的なグリッドについてその違いを理解する必要があります。

明示的および暗黙的なグリッドの定義は、少し分かりにくいかもしれません。例えば、明示的なグリッドは、明示的なグリッドを作成するために使用されるプロパティ、つまりgrid-template-*プロパティによって定義されています。

3つのプロパティgrid-template-rows、grid-template-columns、grid-template-areasは、明示的なグリッドを定義します。
参考: The Explicit Grid -W3C

そして、暗黙的なグリッドは「その他のすべて」と定義されています。

Gridアイテムが明示的なグリッドの外側に配置されている場合、Gridコンテナはグリッドに暗黙のグリッドのラインを加えてグリッドのトラックを生成します。これらのラインは明示的なグリッドと一緒に暗黙的なグリッドを形成します。
参考: The Explicit Grid -W3C

これらの定義を上の文章だけで理解するのは少し難しいので、簡単に言い換えてみます。

Gridコンテナ内には、セルがあります。これらのセルはgrid-template-*プロパティで配置・サイズが設定され、明示的なグリッドの一部を形成します。このプロパティを使用して配置・サイズが設定されていないセルは、暗黙的なグリッドの一部を形成します。

「grid-template-」と「grid-auto-」の違い

grid-template-*とgrid-auto-*プロパティーはその構造と構文にはいくつかの類似点があり、使用される値も似ているため、同じだろうと思うことは安直です。
これら2つのプロパティは、全くの別物です。

grid-template-*プロパティはセルの位置とサイズの両方を定義するために使用されますが、grid-auto-*プロパティはセルのサイズのみを定義するために使用されます。

この違いは、これらのプロパティが何のために使用するのか理解できたときに明らかになります。grid-template-*プロパティは明示的なグリッドを作成するために使用され、grid-auto-*プロパティは暗黙的なグリッドを作成するために使用されます。

「grid-template-*」の仕組み

「grid-template-*」には4つのプロパティがあります。「grid-template-rows」「grid-template-columns」「grid-template-areas」、そして「grid-template」です。最後のは3つをまとめるショートハンドです。ここでは、最初の2つにフォーカスします。

まずはgrid-template-rowsプロパティを見てみましょう。
100pxの高さの1行のグリッドを作成する場合、次のCSSを使用します。

.grid {
	display: grid;
	grid-template-rows: 100px;
}

.grid {

display: grid;

grid-template-rows: 100px;

}

グリッドに行を追加したい場合は、スペース区切りの値を追加するだけです。

.grid {
	display: grid;
	grid-template-rows: 100px 100px;
}

.grid {

display: grid;

grid-template-rows: 100px 100px;

}

grid-template-columnsプロパティでも、同じことができます。

grid-template-*プロパティで行や列の高さ・幅を定義するにはいくつかの方法がありますが、値とトラックは常に一対です。上記のコードにあるように、スペースで区切られた値は単一の行（トラック）を表しています。つまり、grid-template-*プロパティはサイズを定義するだけではなく、セルの位置とレイアウトを定義しているということです。

「grid-auto-*」の仕組み

「grid-auto-*」には3つのプロパティがあります。「grid-auto-rows」「grid-auto-columns」「grid-auto-flow」です。ここでは、最初の2つにフォーカスします。

grid-auto-rowsプロパティとgrid-auto-columnsプロパティは、暗黙的なグリッドのセルのサイズを定義するために使用される単一の長さの値を定義します。例えば、暗黙的なグリッドの行の高さを100pxにする場合、次のCSSを使用します。

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

.grid {

display: grid;

grid-auto-rows: 100px;

}

grid-auto-*プロパティはgrid-template-*プロパティとは異なり、長さの値を一つしか定義できません。

明示的および暗黙的なグリッドの仕組み

grid-template-*プロパティとgrid-auto-*プロパティの違い、そして明示的および暗黙的なグリッドの違いを理解するには、次のHTMLを見てください。

<div class="grid">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
  <div class="cell">Cell 3</div>
  <div class="cell">Cell 4</div>
  <div class="cell">Cell 5</div>
  <div class="cell">Cell 6</div>
  <div class="cell">Cell 7</div>
  <div class="cell">Cell 8</div>
</div>

</div>

CSSは次のように記述します。

.grid {
	display: grid;
	grid-gap: 10px; /* 視認性を高めるために間隔を追加 */
}

.grid {

display: grid;

grid-gap: 10px; /* 視認性を高めるために間隔を追加 */

}

これらのコードで、グリッドは次のように表示されます。

各セルを行に配置

特に何も起こっていないように見えるかもしれませんが、実は暗黙的なグリッドが作成されています。このグリッドには、グリッドセルと同じ数の行があります。
Firefoxでgrid inspectorを使用すると、暗黙的なグリッドを見ることができます。

暗黙的なグリッド

grid-autoを使用した暗黙的なグリッドのサイズ定義

これらの行の高さのサイズを指定する場合、grid-auto-rowsプロパティを使用できます。

.grid {
	display: grid;
	grid-gap: 10px; /* 視認性を高めるために間隔を追加 */
	grid-auto-rows: 30px;
}

.grid {

display: grid;

grid-gap: 10px; /* 視認性を高めるために間隔を追加 */

grid-auto-rows: 30px;

}

各行の高さを30pxに定義しました。

各行の高さを30pxに定義

ここで行ったことは、高さの値を一つ定義しただけです。この一つのスタイルだけで、グリッド内のすべての行に適用されていることに注目してください。

grid-templateを使用した明示的なグリッドの作成

今度は、明示的なグリッドを定義してみます。
上2つのセルに対してのみ、100pxの高さを定義してみます。

.grid {
  display: grid;
  grid-gap: 10px; /* 視認性を高めるために間隔を追加 */
  grid-auto-rows: 30px;
  grid-template-rows: 100px 100px;
}

.grid {

display: grid;

grid-gap: 10px; /* 視認性を高めるために間隔を追加 */

grid-auto-rows: 30px;

grid-template-rows: 100px 100px;

}

このコードで、グリッドは次のように表示されます。

上2つのセルの高さを100pxに

上2つのセルだけが100pxの高さで、残りのセルはgrid-auto-rowsプロパティで定義された高さです。明示的なグリッドと暗黙的なグリッドは、下記のように区別されています。

明示的なグリッド（上2つ）と暗黙的なグリッド（その他のすべて）

「その他のすべて」は、明示的および暗黙的なグリッドシステムとはで紹介した暗黙的なグリッドの定義です。ここまでの説明で明示的なグリッドと暗黙的なグリッドの違い、「grid-template-*」と「grid-auto-*」の違いについて明確に理解できたと思います。

要約

要約すると、grid-template-*プロパティは明示的なグリッドのセルを作成し、配置・サイズを定義するために使用されます。grid-template-*プロパティで明示的に作成されていないセルは暗黙的なグリッドの一部を形成し、grid-auto-*プロパティによってサイズを定義することができます。