初心者でもできる！display: grid 基本とレイアウト入門
記事の概要
Webサイトを構築していて「このレイアウトどうやろうか…」ということありませんか？実はそれ、gridを使うとシンプルに解決できるかもしれません。
この記事では、gridレイアウトの基本的な解説とプロパティの使い方について解説します。
Gridレイアウトの基本的な概念
gridレイアウトは、その名のとおり「格子（グリッド）」のように要素を並べるレイアウト手法です。
使い方はシンプルで、親要素に display: grid; を指定するだけ。
このとき、display: grid; を指定した要素を グリッドコンテナ、その中の子要素を グリッドアイテム と呼びます。
<div class="c-grid">
<p class="c-grid__item">アイテム</p>
<p class="c-grid__item">アイテム</p>
</div>
上の例だと、.c-grid がグリッドコンテナ、.c-grid__item がグリッドアイテムですね。
イメージとしては、グリッドコンテナが「自分の中にマス目を用意」してくれて、
そのマス目にグリッドアイテムをポンポン置いていく感じです。
そしてこの「マス目」のルール（列数・行数・幅・高さなど）はCSSプロパティで自由に決められます。
「ここは2列にしたい」「ここは固定幅、こっちは伸縮してほしい」といった要望をコントロールできるのが、gridの大きな特徴です。
まずは覚えておきたいプロパティ
gridを使うときに「まずこれだけ押さえておけば大丈夫！」というプロパティをまとめました。
細かいものもたくさんありますが、最初はこのあたりから覚えるのがおすすめです👇
まずは グリッドコンテナに関するプロパティ を覚えるだけでも十分です。
アイテムを直接いじるよりも、親要素（コンテナ）で「どんなマス目を作るか」を決めるのが基本の考え方です。
grid-template-columns（grid-template-rows）
列や行のサイズを指定しグリッドコンテナ内の「マス目」を作ります。
gridレイアウトでは、必ず使うプロパティです。
大げさに言ったら、これを使わないとgridレイアウトをする意味がないです。
.c-grid {
display: grid;
grid-template-columns: 200px 400px;
}
例では、200pxと400pxの列を作っています。
gap
グリッドアイテム同士の余白を設定します。
flexレイアウトでもよく使われるプロパティで、使い方も同じです。
gapを使うと一括で、列方向、行方向の余白を指定できます。column-gapだと列方向、row-gapだと列方向の余白を指定できます。
.c-grid {
display: grid;
grid-template-columns: 200px 400px;
gap: 20px;
}
この例では、column-gap: 20px; ,row-gap: 20px; を指定しているのと同じで、列方向、行方向の余白が20pxとなります。
justify-content / align-content
グリッドコンテナ内のマス目を、コンテナの中でどう配置するかを決めます。
プロパティの値はstart, centerがよく使うかなと思います。
justify-content→ 列方向の揃え方align-content→ 行方向の揃え方
.c-grid {
display: grid;
grid-template-columns: 200px 400px;
gap: 20px;
justify-content: center;
padding-block: 2rem;
height: 400px;
background-color: #ddd;
}
.c-grid__item {
background-color: #08254f;
color: #fefefe;
}
この例では、以下のようになります。
この例でjustify-content: start;とした場合は以下のようになります。
※深掘り〜知っておくと便利
この例で、グリッドアイテムには高さは設定していませんが、画像を見るとテキストよりも大きい高さが設定されています。
この理由は、align-contentや次に紹介するalign-itemsのデフォルト値がstretchだからです。グリッドコンテナの高さが400pxあるため、その400pxを目一杯使おうと要素が伸縮し、設定されます。
justify-contentやjustify-itemsも同様にデフォルトはstretchとなります。
例のコードにalign-content: center;を追加すると以下のようになります。
このように、gridでレイアウトを作ると意図せず要素が伸びたりすることがあります。
その時はデフォルトがstretchになっているということを思い出してみてください。
justify-items / align-items
グリッドアイテムを、マス目の中でどう配置するかを決めます。
プロパティの値はstart, end, centerがよく使うかなと思います。
justify-items→ 列方向の揃え方align-items→ 行方向の揃え方
.c-grid {
display: grid;
grid-template-columns: 200px 400px;
gap: 20px;
justify-content: center;
align-items: center;
padding-block: 2rem;
height: 400px;
background-color: #ddd;
}
.c-grid__item {
background-color: #08254f;
color: #fefefe;
}
このコードは、align-items: center;で各要素をマス目の中で、行方向に対して真ん中に配置しています。
以下のようになります。
「test」というテキストがマス目の中で行方向に対して真ん中に配置されていることがわかります。align-itemsはデフォルトでは、stretchという値になっており、マス目の高さいっぱいに伸びていたところ、centerを指定することで、本来の高さ（テキストの高さ）に戻り、真ん中に配置されたという形です。
※よく使うプロパティの組み合わせ
gridレイアウトでよく使われる一覧などは以下のプロパティの組み合わせでできていることがほとんどです。
- grid-template-columns
- gap
- justify-content
- align-items
以下は3列の一覧の例。
.c-grid {
display: grid;
grid-template-columns: 30% 30% 30%;
gap: 5%;
justify-content: center;
align-items: start;
}
.c-grid__item {
}
知っておくといい基本的なテクニック
frを使ったレイアウト
gridレイアウトのマス目を定義する中で便利なfrという単位があります。fr は fraction（フラクション＝分数） の略で、「残りのスペースを分割する単位」です。
この単位をgrid-template-columnsに指定することでレスポンシブルにマス目の大きさを設定できます。
.c-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
justify-content: center;
align-items: start;
}
.c-grid__item {
}
この例では、3列のマス目を作り、gapを差し引いた残りの1/3の大きさをマス目の横幅にするというコードで以下のようになります。
grid-template-columns: 2fr 1fr 1fr;のように1列目だけ2frとした場合は以下のようになります。
frは「残りのスペースを分割する単位」なので、gapを除いた残りの幅を2: 1: 1の割合で分割します。
画面幅を変えても、親要素の大きさに対しての割合になり、レスポンシブルにマス目の大きさも変動するため、非常によく使います。
※%を使うのとどう違う？
レスポンシブに大きさを変動させる単位として「%」もありますが、%の場合は、gapの大きさを計算しないといけないという手間が発生します。
以下のように3列のマス目を作るために1列当たり1/3の33%としてコーディングした場合。
.c-grid {
display: grid;
grid-template-columns: 33% 33% 33%;
gap: 20px;
justify-content: center;
align-items: center;
padding-block: 2rem;
height: 400px;
background-color: #ddd;
}
.c-grid__item {
background-color: #08254f;
color: #fefefe;
}
%はあくまで「親要素の大きさに対しての割合」になるため、gapの大きさを計算しないとこのように親要素をはみ出してしまいます。
このため、リスク、計算の手間をなくすためにfrを使うのが一般的です。
repeatを使ったレイアウト
「同じサイズの列を何回も書くのは面倒…」というときやに使えるのが repeat()。
grid-template-columns/grid-template-rowsに使える関数で、その名の通り「繰り返し」を定義します。
.c-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
justify-content: center;
align-items: start;
}
.c-grid__item {
}
このコードをrepeat()を使って書くと以下のようになります。
.c-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
justify-content: center;
align-items: start;
}
.c-grid__item {
}
repeat(3, 1fr)とすることで、第一引数は繰り返し回数で第二引数は大きさを指定します。
repeatを使うことで、列数が多い時にすっきりと書くことができます。
まとめ（基本編）
gridレイアウトはdisplay: grid;を使ったレイアウトのことを指す。
display: grid;を指定した要素をグリッドコンテナ、その子要素をグリッドアイテムと言う。
グリッドコンテナにgridレイアウトのプロパティを指定することで、その要素をマス目のように区切り、そのマス目に子要素のグリッドアイテムをはめていくイメージ。
gridレイアウトのプロパティでよく使うものは覚えておくと便利。
次の記事では、gridレイアウトを使ったすぐに実装で使えるテクニックについて解説・紹介できればと思っています。
