[CSS] Grid（グリッドレイアウト）入門：超基本を学ぶ

CSS Grid（グリッドレイアウト）は、要素を縦と横の2次元で柔軟に配置できる、強力なレイアウト手法です。
この記事では、CSS Grid の基本から実際の使い方までを、初めて CSS Grid を使う方に向けてやさしく解説します。

CSS Grid（グリッドレイアウト）とは？

CSS Grid（グリッドレイアウト）とは、要素を縦横の「線」で区切って、2次元的に配置できる仕組みです。
float や flexbox といったこれまでのレイアウト方法とは異なり、CSS Grid は「行」と「列」を明確に扱えるのが特徴です。

基本の書き方：display: grid; を使ってみよう

グリッドコンテナ と グリッドアイテム

まずは、もっとも基本的な CSS Grid の使い方から見ていきましょう。

グリッドレイアウトでは、display: grid; を指定した要素を「グリッドコンテナ」、その中に配置される子要素を「グリッドアイテム」と呼びます。
親要素に display: grid; を指定するだけで、子要素は「グリッドアイテム」として扱われます。

※ CSS Grid の構成要素（グリッドラインやセルなど）についてのこちらの記事もあわせて読むとより理解が深まります。

 
・html

 
・css

 

See the Pen
display: grid; by mkl may (@mkl-may)
on CodePen.

 
これだけでは2次元的な変化は見た目に現れないため、次に列や行を定義してみましょう。

列と行を定義：grid-template-columns / grid-template-rows

グリッドの「列」の数やサイズは、grid-template-columns で指定します。
グリッドの「行」の数やサイズは、grid-template-rows で指定します。

 
上記のように書くと、横方向に幅100pxの列が3つ、縦方向に高さ50pxの行が2つある「マス目」ができます。
 

See the Pen
display: grid;　02 by mkl may (@mkl-may)
on CodePen.

アイテムの配置を指定する：grid-column / grid-row

アイテムごとに「どの列・どの行に配置するか」を細かく指定できます。
 
grid-column

 

See the Pen
display: grid;（grid-column） by mkl may (@mkl-may)
on CodePen.

このように指定することで、横方向に2列分のスペースを使うアイテムが作れます。
 
grid-row

 

See the Pen
display: grid;（grid-row） by mkl may (@mkl-may)
on CodePen.

このように指定することで、縦方向に2行分のスペースを使うアイテムが作れます。

 

最初は数字に戸惑うかもしれませんが、実際にコードを書いて動かしてみると、だんだん感覚が掴めてきます

余白をつける：gapプロパティ

CSS Gridでは、アイテム同士の余白も簡単に設定できます。
アイテム同士の間に余白を入れたいときは、gapプロパティを使います。

 

See the Pen
display: grid;（gap） by mkl may (@mkl-may)
on CodePen.

縦余白 15px 横余白10px にしたい時は以下のように指定します。

よくあるレイアウトを作ってみよう（実例）

実際のWebサイトでよく見る「3カラムのカードレイアウト」を作ってみましょう。

 
repeat(3, 1fr) と書くと、幅が均等な列（1fr）を3つ作るという意味になります。
言いかえると、「1fr を3回繰り返して、3列にする」という指定です。

幅767px以下では1fr（均等幅）の列を1つで、1カラムで表示します。

See the Pen
display: grid;(3, 1fr) by mkl may (@mkl-may)
on CodePen.

※0.5× でご確認ください

まとめ：CSS Grid の基本を押さえよう

今回はCSS Grid の超基本を学びました。
実際にコードを書いて動かしてみると、理解がぐっと深まります。

CSS Grid は機能が豊富で奥が深いですが、まずは
「親要素に display: grid; を指定する」
「列・行を設定する」
「アイテムの位置を指定する」
この3つを覚えておけば、基本的なレイアウトが組めるようになります。