【CSS】私的なdisplay: gridでデザインを柔軟に変えられる書き方の紹介

　グリッドデザインは縦横を整えたデザインを作るのに便利です。縦横がそろっていると見た目的に整った印象があり、見やすくなります。同じ構成の要素を繰り返し描く時、同じ形のグリッドを繰り返し描くことで同じようなものについて描かれていると伝えやすいです。こういったグリッドデザインをやりやすくするCSSのしくみにグリッドレイアウトがあります。グリッドレイアウトはdisplay:gridで呼び出せます。グリッドレイアウトは多機能で便利なのですが、多機能すぎてこれというベストプラクティスがあまり思いつきません。この記事では自分のよくやる方法を紹介します。

　CSSはざっくり次のように書きます。

.grid-container {
  display: grid; /* グリッドレイアウトを呼び出す */
  grid-template-columns: repeat(4, 1fr); /* 4列で制御するという定義。ここは作りたいもの次第で増やす */
  gap: 0.5em; /* 各要素の間隔をつける。フォントサイズ単位なのは文字サイズ相応の隙間にしておくと広がりすぎ、狭すぎになりにくい */
}

　HTMLは次のように書きます

<div class="grid-container">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
  <div>要素4</div>
  <div>要素5</div>
  <!-- 続く -->
</div>

　こうすると次のようになります（見た目が分かりやすくなるように色を付けています。）。

　勝手に折り返したり整列したりしてくれるわけですね。シンプルな単一要素の繰り返しだけならこれで十分です。

　幅を広く取るべき要素が現れた時には次のように書きます。

.grid-container {
  display: grid; /* グリッドレイアウトを呼び出す */
  grid-template-columns: repeat(4, 1fr); /* 4列で制御するという定義。ここは作りたいもの次第で増やす */
  gap: 0.5em; /* 各要素の間隔をつける。フォントサイズ単位なのは文字サイズ相応の隙間にしておくと広がりすぎ、狭すぎになりにくい */
  > .w-2 {
    grid-span: 2; /* 横幅2指定 */
  }
}

<div class="grid-container">
  <div>要素1</div>
  <div>要素2</div>
  <div class="w-2">幅2の要素</div>
  <div>要素4</div>
  <div>要素5</div>
  <!-- 続く -->
</div>

　これは次のようになります。

　目論見通り2列分の幅の要素になります。この書き方のいいところは後から要素を増減させたり、他の要素の幅を変えたりしてもCSSやHTMLを大して書き換えなくてよいところにあります。もし2列幅にしたいという目的で「3列目と4列目にまたがる」という風に定義すると、他要素に変更があった際に2列幅要素まで変更しなければならなくなります。

　しばしば複数の要素が常に隣り合うようにしたい時があります。近接する要素は人間的にはグループとして捉えられやすいです。関連する要素なのに折り返しにまたがるようだと違和感を抱かれやすいです。複数の要素をまとめたいならば次のように書きます。

.grid-container {
  display: grid; /* グリッドレイアウトを呼び出す */
  grid-template-columns: repeat(4, 1fr); /* 4列で制御するという定義。ここは作りたいもの次第で増やす */
  gap: 0.5em; /* 各要素の間隔をつける。フォントサイズ単位なのは文字サイズ相応の隙間にしておくと広がりすぎ、狭すぎになりにくい */
  > .w-2 {
      grid-column: span 2;
  }
  > .g-2 {
      grid-column: span 2; /* グループ要素は2列分の幅を取る */
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* グループ内で2列に分ける */
      column-gap: inherit; /* 親の列間のgapを継承 */
  }
}

<div class="grid-container example3">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
  <div class="g-2">
    <div>グループ要素1</div>
    <div>グループ要素2</div>
  </div>
  <!-- 続く -->
</div>

これは次のようになります。

　グループ要素は内部要素に応じた幅を取り、親のグリッドと同じ幅でグループ内の子要素を描画します。こうするとグループとしてまとめたい要素を隣り合わせ、グリッドレイアウトとして維持できます。

　こんな感じでゆるいCSS定義でレイアウトを組むと後で調整したりする時に変更する量が少なく済んで楽ができます。