CSS Gridレイアウト入門：基本の3プロパティ

まずはサンプルをご覧ください。

上記サンプルは10個のdivタグにGridレイアウトを適用したものです。

今回はGridレイアウト用プロパティを3つ使っています。この3つだけ覚えれば一般的なWebデザインなら実用に耐えうるレイアウトができます。

• grid-template-columns
• grid-template-rows
• grid-gap

HTML

<div class="grid">
  <div>1</div>
  〜
  <div>10</div>
</div>

親要素のクラスgridの中に10個のdivを収めています。

CSS

.grid {
  display: grid;
  grid-template-columns: 100px auto 100px 50px;
  grid-template-rows: 50px 100px;
  grid-gap: 10px 5px;
  〜
}

displayでgridを指定し、以降3つはGridレイアウト用プロパティになります。
Gridレイアウトの基礎部分は親要素に設定し、子要素はその影響を受ける形になります。

grid-template-columns

横方向（列）のGridを定義します。

grid-template-columns: 100px auto 100px 50px;

サンプルでは横4列のGridを定義しています。
4個を越える場合は自動的に折り返され、また同じ幅で繰り返されます。

今回の設定の場合、auto指定のカラムは余った分の横幅いっぱいに広がるリキッドレイアウトになりますが、今回省いている他のプロパティを設定すると解釈が変わります。

grid-template-rows

縦方向（行）のGridのサイズを定義します。

grid-template-rows: 50px 100px;

サンプルでは1行目を50px、2行目を100pxと指定していますが、指定していない3行目は消えたりすることはなく、何の影響も受けない形になります。

grid-template-columnsは列の個数とサイズを定義しますが、grid-template-rowsは現仕様だと行のサイズのみ定義すると考えてよいです。

grid-gap

Grid間の間隔を定義します。

grid-gap: 10px 5px;

サンプルでは上下に10px、左右に5pxの間隔を作っています。

間隔がどのようにレイアウトに影響しているか分かりやすいよう.gridに背景色を付けていますが、marginと異なり親要素に余白が飛び出すことがなく外部に影響を与えないことが分かります。この仕様はとても良いと思います。

※「余白」ではなくGridの「間隔」なので、上記でも意識的に「間隔」と書きました。

注意：MSブラウザにはベンダープレフィックスが必要

IE、EdgeもGrid対応を謳っていますが、ベンダープレフィックスがあれば、という話になります。
サンプルにIE用のベンダープレフィックスを付けるなら以下のようになります。

.grid {
  display: grid;
　　　　display: -ms-grid;
  grid-template-columns: 100px auto 100px 50px;
　　　　-ms-grid-columns:　100px auto 100px 50px;
  grid-template-rows: 50px 100px;
　　　　-ms-grid-rows: 50px 100px;
  grid-gap: 10px 5px;
  -ms-grid-gap: 10px 5px;
  〜
}

displayだけ特殊ですが、プロパティに -ms- を付ける形になります。

まとめ

• display: grid を親要素に指定する
• 以下の3プロパティでGridを定義する
  • grid-template-columns
  • grid-template-rows
  • grid-gap

最低限で言えば grid-template-columns だけでもGridレイアウトは成り立ちますが、今回は簡単で効果も分かりやすい3プロパティという形で紹介しました。