初心者から一歩先へ！display: grid 応用と実践テクニック

実践的なプロパティ

minmax()

grid-template-columns/rowsのrepeat()関数の中で使える関数です。

minmax(最小値、最大値)という形で定義し、その値の取りうる範囲を指定できます。

minmax(200px, 400px)と設定すると、「400pxでスペースが確保できる時は400px、確保できない時は200px〜400pxで調整、ただ、200pxよりは小さくならない。」という指定となります。

はじめ要素は200pxでしたが、画面幅が広がるにつれ大きくなっていき、400pxを最大にそれ以降は大きくなりません。注意して欲しい点が、400pxよりも画面幅が大きく、スペースが余ったとしても最大値で横に並べられるようになるまで、列は自動で増えないという点です。

また、最小値が最大値よりも大きい値の場合は、無視され最小値が無条件で適用されます。
よくない例）minmax(200px, 100px)は、常に200pxとして機能します。

これらの特性を利用し、最大値に1frを指定することで違和感がなく自動で列が増えるレイアウトを組むことができます。

auto-fit / auto-fill

grid-template-columns/rowsのrepeat()関数の中で使える値です。

ギャラリーや一覧で「列数が自動調整されるレイアウト」に便利です。

• auto-fit：空きスペースがあればアイテムを広げる
• auto-fill：空のマスを維持する

違いを上記のように書きましたが、実際の例を見た方がわかりやすいと思います。

最初は両者に違いはありませんが、画面幅が大きくなっていくとauto-fitスペースにあまりができるとスペースいっぱいまで広がり、auto-fillはスペースが余ったとしても「透明の要素がある」とみなし、空のグリッドが作られます。

grid-template-areas

グリッドコンテナに指定するプロパティです。

grid-template-columns/rowsで作ったマス目に対して、エリア名を定義します。

エリア名を指定することにより、直感的にレイアウトを作ることができます。

<div class="c-grid area">
  <p class="c-grid__item --01">コンテンツ</p>
  <p class="c-grid__item --02">ヘッダー</p>
  <p class="c-grid__item --03">サイドバー</p>
  <p class="c-grid__item --04">フッター</p>
</div>

.c-grid.area {
  grid-template-columns: 1fr 200px;
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
}
.c-grid__item.--01 {
  grid-area: main;
}
.c-grid__item.--02 {
  grid-area: header;
}
.c-grid__item.--03 {
  grid-area: sidebar;
}
.c-grid__item.--04 {
  grid-area: footer;
}

グリッドコンテナに対して、grid-template-areasを指定します。書き方もマス目を行列のように記載するので、直感的に捉えやすいと思います。headerやfooterのように隣り合うマス目に複数書くと結合されていると解釈されます。

そして、子要素それぞれにgrid-areaを使って、グリッドコンテナで作成したマス目のエリア名を指定してやると子要素の順番関係なく、指定したエリアに置かれます。

実践的なレイアウト

repeat() × auto-fit / auto-fill × minmax()でレスポンシブ対応

auto-fillとminmax()を使って、レスポンシブな一覧を作るテクニックです。

画像を並べるのによく使います。

minmaxの最小値を調整することで、メディアクエリを書かずにスマホでは1列、タブレットでは2列、PC（画面幅1440px）では4列などが可能です。

<div class="c-grid area">
  <p class="c-grid__item">test</p>
  <p class="c-grid__item">test</p>
  <p class="c-grid__item">test</p>
  <p class="c-grid__item">test</p>
</div>

.c-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}

grid-template-areasでより柔軟なレイアウト

grid-template-areasを使って、自由度の高いレイアウトも可能です。

さらに、スマホの時にレイアウトを変えたいということがあれば、メディアクエリで画面幅に応じてgrid-template-areasを変更することで可能です。

<div class="c-grid area">
  <p class="c-grid__item --01">アイテム1</p>
  <p class="c-grid__item --02">アイテム2</p>
  <p class="c-grid__item --03">アイテム3</p>
  <p class="c-grid__item --04">アイテム4</p>
</div>

.c-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "area1 area2"
    "area3 area2"
    "area3 area4";
  gap: 1rem;
}
@media screen and (min-width: 600px) {
  .c-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "area1 area2 area2"
      "area1 area3 area3"
      "area4 area4 area4";
  }
}
.c-grid__item.--01 {
  grid-area: area1;
}
.c-grid__item.--02 {
  grid-area: area2;
}
.c-grid__item.--03 {
  grid-area: area3;
}
.c-grid__item.--04 {
  grid-area: area4;
}

この手法を用いることで、あらゆるレイアウトのレスポンシブ対応が可能です。

ただ、マス目を結合するときに結合結果が四角にならないように指定してしまうと、grid-template-areasを無効になってしまいますので注意が必要です。（area1が四角にならない）

grid-template-areas:
  "area1 area1"
  "area2 area1"
  "area3 area4";

さいごに

自動的に列を調整する方法、柔軟なレイアウトへの対応方法について述べました。

この記事で紹介したプロパティを使えば、あらゆるレイアウトへの対応が可能だと思います。
まずは、前の記事とこの記事で紹介したプロパティを使いこなすことを目指していけば構築で困ることは少なくなると思います。

次回はさらに発展として、grid-template-areaの別の使い方、subgridの使い方を紹介し、カード型レイアウト、メディア型レイアウトなどのコードを紹介します。