はじめに

こんにちは！NNCの大土です。

WEBのレイアウト作成の方法としてまず思い浮かぶのは「display:flex」という方が多いと思います。
今回はもう一つのレイアウト作成の考え方である「display:grid」についてのお話です。

初めて聞いた！という方や、display:flexよりもプロパティや値の種類が多くなんだか難しそう…
といったイメージを持たれている方もいらっしゃると思いますが、基本の考え方が分かればdisplay:flexよりも柔軟で簡潔な命令を出すことが可能です。

この記事では
・はじめにdisplay:gridの考え方について理解する
・使用するプロパティと値について知る
・具体的にどんなケースで使用するか

の流れでお話ししていきます。

CSSを学び始めた方から中級者の方まで参考になると思いますので、ぜひご覧いただけると嬉しいです！

display: gridの基本と特徴

1.グリッド（格子）状に縦・横にブロックを並べるイメージ

display:gridの基本的な考え方は、格子状にブロックを縦・横に並べてレイアウトを作る、というものです。
親要素に対してdisplay:gridの命令を出すことで、子要素を並べていきます。

display:flexが横に並べる＝1次元　のレイアウト作成方法なのに対し、
display:gridは縦横に並べる＝2次元　のレイアウトを作ることが得意です。

区画を分けて、希望する区画に要素を配置してあげるイメージです。

2.線・列・行の考え方が大事

1のグリッドを作るにあたって大事なのが、線・列・行の3つです。それぞれがグリッドのどこを指す言葉なのかを把握しておきましょう。

線・・・ライン
線を引いて区画を作るイメージです。例えば下記の図の一番左上の区画に要素を配置したい場合、
1列目と2列目の線（青い線）の間・1行目と2行目の線（赤い線）の間、ということになります。

列（横方向で幅を設定）・・・column
行（縦方向で高さを設定）・・・row

まずは1.2の考え方をおさえておきましょう！

display: gridと一緒に使うプロパティ一覧

それではdisplay:gridの具体的な使い方、また一緒に使用するプロパティ・値についてご紹介していきます。
単語の後ろにsが必要だったりいらなかったりとやや複雑ですが、注意してみていきましょう。

display:grid プロパティの種類一覧

display: grid

まずこれでグリッドコンテナを指定します。

display:flexとは異なりdisplay:gridを命令しただけでは特に変化が見られませんが、後述のプロパティを使って詳細の設定を行っていきます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

grid-template-columns・grid-template-rows

grid-template-columnsはグリッドの列の幅、
grid-template-rowsはグリッドの行の高さを指定します。

例えばコンテナの中身を3列・3行で構成したい場合、それぞれの値を3つ設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

値の設定の仕方がいくつかあるので、確認していきましょう。

1.pxで設定

例： grid-template-columns: 100px 100px 100px;
→3列の幅をそれぞれ100pxに設定する

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

2.⚪︎frで設定

例： grid-template-columns: 1fr 1fr 1fr;
→3列をそれぞれ均等な幅に設定

frはfractionの略で比率・割合を意味します。
列を3つに分けたときに、それぞれの幅が同じサイズになるよう調整してくれます。
1fr 2fr 1frのように異なるサイズに設定することも可能です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

3.繰り返す

例： grid-template-columns: repeat(3, 1fr);
→3列をそれぞれ均等な幅に設定

結果は2と同じですが、repeat関数を使うと何列でどれくらいの幅にするかをまとめて指定できます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

4.pxとfrを混ぜる

例： grid-template-columns: 1fr 200px 1fr;
→2列目だけ200pxに設定、1列目・3列目は残りの幅の半分ずつを設定

frとpxを一緒に設定することもできます。
例えばコンテナの横幅が1200pxの場合、上記の設定だと

1列目＝500px（（1200-200）÷2）
2列目＝200px
3列目＝500px（（1200-200）÷2）ということになります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

5.autoを混ぜる

例： grid-template-columns: 150px auto 150px;
→1列目・3列目は150pxずつ、2列目はその残り分の幅になる

例： grid-template-columns: 1fr auto 1fr;
→2列目はグリッドの要素の幅に合わせ、1列目・3列目は残りの幅の半分ずつを設定

autoは何の値と組み合わせるかによって扱いが変わってきます。
他の値が数値と単位の組み合わせなら残り全部、frなら要素のサイズに合わせるという違いがあります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

6.auto-fit・minmaxを使う

例： grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
→1列の幅を最低400px・最高1frで可変、画面サイズに合わせて列の数を自動で変更する

画面幅を可変させたイメージはこちらです。

1〜5までの例とは異なり、グリッドの幅に応じて列数を柔軟に変更させることができます。レスポンシブ対応で便利な設定方法です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

7.subgridを設定

値にsubgridを設定することによって親要素のグリッドの定義を子要素に継承させることができます。

後述するプロパティの理解が必要になるため、ここでの解説は割愛します。
すぐに知りたい！という方はこちらで確認できます。

column-gap・row-gap・gap

column-gapはグリッドの横方向の間の余白、
row-gapはグリッドの縦方向の間の余白、
gapは上記の2つをまとめて指定することができます。

例：gap: 20px;
→グリッドコンテナ内の列・行の間に20pxの余白を開ける

例：gap: 20px 40px;
→グリッドコンテナ内の行の間に20px、列の間に40pxの余白を開ける
先に書いた値が「行」、後に書いた値が「列」の間の余白になります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

grid-column・grid-row

grid-columnでグリッドの横方向の位置を指定し、
grid-rowでグリッドの縦方向の位置を指定します。
冒頭でお話しした線（ライン）の話を思い出しましょう。

線を引いて区画を分け、あなたはここに移動してくださいね、と位置を決めてあげるイメージです。

例：grid-column: 1 / 2
→1列目と2列目の線の間に配置

例：grid-row: 1 / 2;
→1行目と2行目の線の間に配置

例：grid-column: 2 / 4;
→2行目と4行目の線の間に配置（2枠分になる）
グリッドは1つだけではなく、複数分設定することも可能です。

また、位置を指定していないグリッドは詰めて配置されることになります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

grid-template-areas・grid-area

先ほどのgrid-column・grid-rowと同様にグリッドの位置を指定するプロパティですが、
違いとしては先に区画に名前をつけておき、その区画に配置したいグリッドを指名するイメージです。

すごく唐突ですが、キャンプ場の場所取りや、展示会などのブースの取り方をイメージしていただくと分かりやすそうです。（どちらも馴染みがなかったらすみません、、）

まずgrid-template-areasでグリッドにエリア名をつけておき、grid-areaで配置するグリッドを決めます。
エリア名を指定する時に、1行ずつ値を「“”」で囲むのがポイントです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

display:gridで作るレイアウト参考例

それではここからは具体的にどういったケースでdisplay:gridを取り入れることができるのか、レイアウトの参考例をご紹介していきます。

1.header〜footerまでのページレイアウト

一般的なWEBサイトのレイアウトをdisplay:gridを使って作ってみます。
完成イメージは以下です。

以下のコード例では、header・aside・main・footerをdisplay:gridを使って配置しています。
2列・3行のグリッドを作り、
PC（768px以上）表示のときheader・footerは2列分の横幅とし、
aside・mainは高さをautoに設定することで、情報が増えた場合にも柔軟に対応ができます。

また、下記のコードでHTMLもしくはCSSを表示させるとプレビューがSPサイズに切り替わります。
SPのときは幅は1列のみ（1fr）とし、コンテンツの高さをそれぞれgrid-template-rowsで調節することで簡単に対応できます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

2.コンテンツごとの高さを揃えるレイアウト

2つめは以下のようなパターンです。ニュースやブログ記事の一覧などでよく見かけるレイアウトですね。
注目する点として、サムネイルの高さはすべて同じであるものの、タイトルやその下の説明文の文字量に違いがあるというところです。
コンテンツの開始位置や高さをきれいに揃えたい時もdisplay:gridが役立ちます。

親要素をcontainer、子要素それぞれをwrapとします。

ポイントとしては親要素・子要素両方にdisplay:gridを命令するという点です。
以下のような列・行・余白を設定する形で命令を出していきます。

親要素（<div class=”container”>）の命令
中の要素の幅を200px~1frの間で可変、内側に40pxの余白をあけます。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

子要素（<div class=”wrap”>）の命令
子要素にもグリッドレイアウトを命令し、行の高さをsubgridとすることで親要素の行の高さを継承します。
列の配置の値を「span 3」とすることで3行分（画像・タイトル・テキスト）を使用します。
さらに、子要素の中の余白は10pxに設定します。

.wrap {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 10px;
}

こうすることで、要素の高さが異なるコンテンツをきれいに配置させることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

まとめ

今回の記事ではdisplay:gridについて解説をしました。みなさまのレイアウト作成のヒントになれば嬉しいです！

STUDIO NNCではコーディングパートのみの部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からワードプレス構築まで一貫した制作を得意としております。

ご相談がございましたら、お気軽にお問い合わせフォームよりお問い合わせください！