CSSグリッドの基本〜display:gridの使い方

Grid layoutについて
グリッドレイアウトコーディングの基本
グリッド作成手順

Grid layoutについて

これまでのfloatレイアウトで複雑なレイアウトを作成する場合には、divタグを多用するなどトリッキーな作業が必要でした。CSS3ではFlexレイアウトが開発され、フレキシブルなレイアウトが柔軟に作成できるようになりました。けれども、Flexboxによる方法も所詮は1次元の流れを調整するものです。
そして、今回紹介するGridレイアウトは2次元の配置が行えることがポイントで、より柔軟なレイアウトが可能になりました。それはあたかも紙面のレイアウトのようなものもシンプルなタグで実現できます。

仕様書：CSS Grid Layout Module Level 1

下の図は典型的なflex-layout

次の図はgrid-layout

使用可能なブラウザ

開発ブラウザはFirefoxがお薦めです。グリッドラインの表示と番号の表示が嬉しいです。

グリッドレイアウトコーディングの基本

サンプルコードはGitHubページへ

完成見本

グリッドレイアウトを行うにはまず次の名前を覚えましょう。

グリッドコンテナ：個々のグリッドを囲むコンテナ
グリッドアイテム：コンテナ内の各子要素
グリッドトラック：2つのグリッドラインの間の領域のことです。明示的グリッド (explicit grid )と暗黙的グリッド (implicit grid) でもトラックは作成されます。
グリッドライン：グリッドトラックの境界線で自動で番号が付けられる。
グリッドセル：CSS グリッドの最小単位がグリッドセルです。四つの交差するグリッドラインに囲まれた領域のことで、表に於けるセルと考え方はほぼ同じ
グリッドエリア：1つ以上のグリッドセルからなる長方形の領域です。グリッドエリアはライン指定による配置と名前付きグリッドエリアでエリアを定義する方法があります
ガター：隣接するグリッドの間隔

グリッド作成手順

グリッド作成の方法はグリッドラインを指定する方法とグリッドエリアを指定する方法があります。どちらでも使いやすい方法をとると良いでしょう。（そのうちこれが定番！となるやり方が誰かによって唱えられるかもしれませんが。。）

グリッドレイアウトはグリッドラインで決める方法とグリッドエリアで決める方法がある。

ここでは、グリッドラインで指定する方法から説明します。

グリッドコンテナ作成

まずは、なにはともあれ、「display:grid」を設定することでグリッドコンテナーを作成することができます。

グリッドコンテナーを作成するには、要素に対して「display: grid」か「display: inline-grid」を指定します。
グリッドコンテナーを作成すると、すべての直接の子要素がグリッド要素へと変わります。

グリッドコンテナ作成
「display:grid」

グリッドトラック作成

グリッドラインでグリッドのサイズを決めていきます。
「grid-template-columns」と「grid-template-rows」プロパティを使用してグリッド上に行と列を定義します。

グリッドトラック作成
「grid-template-columns」と「grid-template-rows」

グリッドコンテナにしたい要素に「display:grid」プロパティを記述します。
グリッドコンテナに行方向を表す「grid-template-rows」プロパティで値は半角スペースで区切りながらサイズを決めていきます。
グリッドコンテナに列方向を表す「grid-template-columns」プロパティで値は半角スペースで区切りながらサイズを決めていきます。
行間や列間はマージンを入れるのではなく、グリッドコンテナにに「grid-gap」プロパティを使います。
グリッドアイテムに特に設定がなければグリッドアイテムのソースの順番にグリッドコンテナで決めた場所に格納されていきます。

ガターの作成

「gap」プロパティは、行や列の間の余白を定義します。これは「row-gap」及び「column-gap」の一括指定です。
「gap」プロパティはもともと「grid-gap」で定義されていました。

ガターの作成
「gap」当分は「grid-gap」も併記

ガター作成のプロパティは、「grid-gap」プロパティと定義されていました。けれども、「gap」プロパティと記述が変わりました。
が、 gap を実装していないブラウザーがまだ多いため、「grid-gap」プロパティを使用する必要があります。

同じグリッドを複数作成

同じサイズのグリッドを複数定義する場合は、repeat()を使うことができます。
繰り返しでない値と併記するには、半角スペースで区切って続ければOKです。

repeat() CSS 関数はトラックリスト内での繰り返し部分を表し、列や行の繰り返しをよりコンパクトに書くことができます。
この関数は CSS Grid のプロパティである grid-template-columns と grid-template-rows の中で使うことができます。

grid-template-rows: repeat(3,150px);
grid-template-columns: repeat(2,150px) 300px;

repeat(リピート回数, サイズ)

fr単位について

fr単位は、グリッドコンテナー内の利用可能な空間の分数(fraction)を表します。
つまり、グリッドコンテナにグリッドを作成してまだ隙間がある場合にそれを指定数値で分割して埋めてくれる単位が「fr」です。

grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);

max-contentとmin-contentの使い方も覚えておきましょう。
max-contentはcontentに依存した大きさになり、最大のcontentのサイズに従います。min-contentは最小のcontentのサイズになります。詳細は別記事を作成します。

グリッドアイテムの配置

グリッドアイテムはソースの順番にグリッドコンテナのグリッドに配置されます。
その配置を変更したい場合はgrid-rowプロパティとgrid-columnプロパティを使います。

grid-rowプロパティ

「grid-row-start」と「grid-row-end」のショートハンドが「grid-row」の記述です。

「grid-row」プロパティの値は、2つのgrid-lineの値で指定します。スラッシュの前はgrid-row-start値、スラッシュの後ろはgrid-row-endの値を記述します。

grid-columnプロパティ

「grid-column」プロパティは、「grid-column-start」と「grid-column-end」のショートハンドです。

「grid-column」プロパティの値は、2つのgrid-lineの値で指定します。スラッシュの前はgrid-column-start値、スラッシュの後ろはgrid-column-endの値を記述します。

.item--1{
  background-color:red;
  /*grid-row-start:2;
  grid-row-end:3;*/
  grid-row:2/3;
  grid-column:2/3;
}

複数セルをまとめたグリッドの作成

複数のグリッドセルをまとめて一つのエリアにしたい場合もグリッドラインで記述することができます。
例えば2つの列を一つにまとめる場合は「grid-column」プロパティの終わりのラインの番号で指定します。
次の例では「grid-column:2/3」ではなく「grid-column:2/4」としています。3つの列をまとめたければ「grid-column:2/5」とします。

.item--1{
  background-color:red;
  grid-row:2/3;
  grid-column:2/4;
}

また、spanを使うこともできます。以下の記述も同様になります。

.item--1{
  background-color:red;
  grid-row:2/3;
  grid-column:2/span 2;
}

また「grid-column-end」の値を-1と指定すると、それは最後の列までを意味します。

.item--1{
	background-color:red;
	grid-row:2/3;
	grid-column:1/-1;
}

例えば以下のようなレイアウトは今までは、レイアウトのために無駄なdivの入れ子を作るなどする必要があり、簡単にできなかったものです。

暗黙的なグリッド（implicit grid）

複数の列や行のグリッドを繋げて配置すると、余ったグリッドアイテムは指定のないグリッドに配置されます。つまり、溢れ出したグリッドアイテムは、自動的に作成された行や列に収まることになります。
このようにしてできたグリッドを暗黙的なグリッド（implicit grid）と言います。

暗黙的なグリッドの調整が必要な場合は「grid-auto-rows」や「grid-auto-columns」プロパティまたは「grid-auto-flow」プロパティを使います。

一つのエリアに複数のグリッドアイテムを置く

一つのエリアに複数のグリッドアイテムを置くことができます。つまり同じエリアにグリッドアイテムを重ねるわけです。
そしてこのように重ねた場合は「z-index」で重ね順を変えることができます。

同じ場所を指定する前の状態

同じ位置を指定したレイアウト
1redの上に2orangeが重なっています。

.item--1{
  background-color:red;
  grid-row:1/2;
  grid-column:2/3;
}
.item--2{
  background-color:orange;
  grid-row:1/2;
  grid-column:2/3;	
}

グリッドエリアの指定

「grid-row」と「grid-column」をさらにまとめたのが、「grid-area」プロパティです。
次の例は1行3列から2行4列までという意味になります。
この記述は慣れるまでわかりにくいかもしれませんので無理にこれを使う必要はありません。

grid-area:1 / 3 / 2 / 4

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

グリッドラインは自動で引かれますが、その時に番号が振られます。
その番号を使用して設定を行うことができますが、番号の代わりに名前をつけることもできます。その場合は命名するときは[]の中に名前を入れます。名前を使うときはそのまま名前を使います。

.container{
  display: grid;
  grid-template-rows:[row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end row4-start]1fr[row4-end];
	grid-gap:20px;
}
.item--1{
  grid-row:row1-start/row1-end;
}

また、リピートする場合は次のようにします。

grid-template-rows:repeat(4,[row-start]1fr[row-end]);

エリアベースのグリッド作成

グリッドエリアを指定するとき、名前付きのグリッド領域で指定することができます。
この方法は信じられないほど直感的にエリアを決めることができます。

グリッドエリアに名前をつける

「grid-template-areas」プロパティを使うとグリッドエリアに名前をつけることができます。

ポイントは「grid-template-areas」プロパティの設定です。
一つの行ごとに、複数のセルの名前を””でくくることがポイントです。
もし、グリッドを割り与えたくない場所には「.」で表現します。

grid-template-areas:
"item--1 item--1 item--4 item--4" 
"item--2 item--3 item--4 item--4"
"item--5 item--6 item--7 item--7"
"item--8 . item--9 item--9";
}

各グリッドアイテムへの紐付けは以下のようにします。

.item--1{
  grid-area: item--1;
}
.item--2{
  grid-area: item--2;
}

align-itemsとjustify-itemsの活用

align-itemsやjustify-itemsはflex以外のgridでも使用できます。
flex-startがstartになるなど微妙に値が違いますので注意してください。

デフォルトでは「align-items: stretch;」がグリッドコンテナにかかっています。
この値を「center」などに変更すると確認することができます。

また、「align-self」や「justify-self」プロパティも使用が可能です。