【CSS】“Grid”だけで折り返しの横並びレイアウトを作れる

WEBサイトのコンテンツを横並びにするデザインの実装方法は、CSSの進化によってここ数年でどんどん変化しました。

2023年、IEのサポートが完全に終わり、とうとうflexとgridを気兼ねなく使えるようになりました。gapプロパティも全てのブラウザで対応したことにより、横並びデザインの方法が完全に確立しました。

今回は、現在の横並びレイアウトの実装方法から、時代背景まで掘り下げて解説します。

Grid layout（グリッドレイアウト）で横並びデザイン

grid layoutは横/縦の2次元面を指定するレイアウトで、イメージはExcelや方眼紙です。

CSSのgridプロパティを使って横並びデザインを実装するためには、grid-template-columnsプロパティを利用します。

以下のHTMLを3カラムで横並びにするサンプルです。わかりやすいようアイテムには色ボーダーを追加します。

<div class="wrap">
  <div class="item">１</div>
  <div class="item">２</div>
  <div class="item">３</div>
  <div class="item">４</div>
  <div class="item">５</div>
  <div class="item">６</div>
  <div class="item">７</div>
  <div class="item">８</div>
</div>  

.wrap {
  display: grid;
  grid-template-columns: 80px 80px 80px;
}

Gridレイアウトでは、wrap要素で子要素の横幅を指定することができるため、記述するCSSのコード量がかなり少なくなります。

grid-template-columnsは同じ値が繰り返される時、repeat()を使うことで、grid-template-columns: repeat(3, 80px);と同義になります。子要素の横幅が同じ場合はrepeat()を使うことでさらにコードの可読性が向上します。

要素ごとの余白を開けるためには、gapプロパティを利用します。

.wrap {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 10px 20px;
}

gapプロパティを使うことで、子要素にmarginプロパティを追加する必要がなくなりました。要素と要素の間にのみ適用されるので、marginでは上下左右に適用されてしまうことも考える必要がなくなります。

justify-contentプロパティを使うことで、中央配置や右側配置にすることも可能です。

.wrap {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 10px 20px;
  justify-content: center;
}

.wrap {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 10px 20px;
  justify-content: end;
}

Gridで横幅変化による折り返し

横幅が変動することによって横並びのカラム数を変化させることもgridプロパティで可能です。先ほどチラと紹介したrepeat()の1つ目の引数にauto-fitを指定することで、横幅によってカラム数が変動するようになります。

自動で折り返されていることがわかりやすいよう、サンプルでは親要素の横幅を変動させています。

.wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px);
  gap: 10px 20px;
  justify-content: center;
}

auto-fitとauto-fillの違い

repeat()の1つ目の引数に使ったauto-fitのほかに、auto-fillを利用することでも自動折り返しを実装することができます。この2つは、要素が少なく1行になったときに違いが出ます。

auto-fillは、要素が足りなくなった余白部分にも仮想的に同じ幅の要素があるものとして振る舞います。

この2つの違いは、justify-cotent: space-between;を指定した例を見るとよくわかります。

/* 1つ目 */
.wrap-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px);
  gap: 10px 20px;
  justify-content: space-between;
}
/* 2つ目 */
.wrap-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 10px 20px;
  justify-content: space-between;
}

auto-fit

auto-fill

Flexboxを利用した横並び

flexは、水平方向か垂直方向の1次元方向のレイアウトです。display: flexを指定した時点で横並びになります。

横並びの折り返しを行うためには、flex-wrap: wrapを指定する必要があります。

Flexboxの方がブラウザ対応が早かったため、現在多くの横並びではdisplay: flex;が指定されています。Flexboxは子要素の横幅に自由度がある場面では非常に有効です。

基本的な横並びはGridレイアウトで事足りるので、ここではgridではなくflexを使うべきパターンを紹介します。

子要素の横幅が異なるときの折り返し

ナビゲーションリストのような文字数が異なることから子要素の横幅がそれぞれ異なるときにはFlexboxが有効です。

.wrap-flex{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.wrap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 100px));
  gap: 10px 20px;
}

Flexbox

Grid

Flexboxを使うことで、子要素の幅を全て維持したまま折り返すことができます。一方、Gridでは2次元方向のレイアウトであることから、レイアウトが格子状になるよう子要素の横幅が調整されていることがわかります。

子要素の横幅を増減させずに折り返ししたい場合はFlexboxを使いましょう。

justify-contentの挙動の違い

Flexboxでは、justify-contentが行ごとに計算されるので、Gridの時と挙動が変わります（Flexboxが先出のため、Gridの挙動が変わっていると言う方が正しい）。

特に顕著に変わりやすいのが、justify-content: centerとjustify-content: space-aroundです。

.wrap-flex-center{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: center;
}
.wrap-flex-around {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-around;
}

justify-content: center;

justify-content: space-around;

Flexboxの場合は、行ごとにjustify-contentが適用されていることがわかります。前述したGridと比べると、Gridでは全ての要素に対してjustify-contentが適用されている部分で違いがあります。

片方の要素の幅が固定されて折り返しする

片方が画像で片方がテキストのデザインの場合、横幅が小さいデバイスでは縦並びレイアウトに変更する時はFlexboxを使います。

メディアクエリを利用することで、GridでもデザインすることができますがFlexboxの方が少ないコード量でデザインすることができます。

<div class="image-flexbox">
  <figure class="image-flexbox__image">
    <img src="https://blog.zaty.jp/wp-content/uploads/2023/03/zaty-favicon.png" alt="">
  </figure>
  <p class="image-flexbox__text">
    これはZATYの公式サイトのFavicon画像です。<br>
    ZATYは「毎日に少しの革命を届ける。」をミッションに、<br>
    プログラミング・デザインそれぞれに特化した役割で構成されたWEB・アプリ開発チームです。<br>
    ブログの運営やWEBサイトの保守事業も展開しています。
  </p>
</div>

.image-flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
}
.image-flexbox__image {
  width: max(30%, 180px);
}
.image-flexbox__text {
  flex: 1;
  min-width: 60%;
}

これはZATYの公式サイトのFavicon画像です。
ZATYは「毎日に少しの革命を届ける。」をミッションに、
プログラミング・デザインそれぞれに特化した役割で構成されたWEB・アプリ開発チームです。
ブログの運営やWEBサイトの保守事業も展開しています。

このような折り返しは、Flexboxの方がより少ないコード量で柔軟に対応することができます。

Flexboxも使えない時代

Flexboxが主要ブラウザで使えるようになったのは2010年前半と言われています。それまではfloatプロパティやdisplay: tableを使うことで横並びを作成していました。

float

floatは本来回り込みを適用させるプロパティです。画像の周りに文字を回り込ませるための仕様をハックすることで横並びを再現していました。

古い記事や参考書では、未だに横並びの方法としてfloatが記載されていることもあるかもしれません。floatを使った横並びは本来の使い方ではない上、自由度も低く、レイアウト崩れの可能性も招くので、現在では使用しません。

display: table;

display: table;も現在では表として利用されるCSSです。1列のテーブルとしてカラム数を増やすことで横並びを再現していました。

floatに比べて思わぬレイアウトの崩れは少ないですが、本来の使い方でなく自由度も低いので、現在では使用しません。

まとめ

今回は要素を横並びにする方法を紹介しました。

現在ほとんどの横並びレイアウトをGridレイアウトで表現することができます。Gridを使った横並びレイアウトに慣れると、コーディング速度が上がりコードの保守性も向上します。

Flexboxでしか表現できないデザインを把握した上で、よりコードの保守性を高めるためにGridの使い方をマスターしましょう！