Flexbox と Grid は、要素を並べるための CSS の仕組みです。どちらも主要なブラウザで問題なく使えるので、いまから組むなら float を使う理由はありません。

違いは「何次元か」

• Flexbox … 1方向に並べる。横一列、または縦一列
• Grid … 行と列の両方を決める。マス目に当てはめる

ナビゲーションのリンクを横に並べる、ボタンとテキストを縦に積む、といった用途は Flexbox です。カードを3列×2行で並べる、ページ全体をヘッダー・サイド・本文・フッターに区切る、という用途は Grid です。

迷ったときの判断

入れ子にして併用できます。全体を Grid で区切り、その中の1マスの中身を Flexbox で並べる、という組み合わせが実務では多い形です。

詰まりやすいところ

文字が折り返さず、はみ出す

Flexbox の子要素は、既定で中身より小さくなりません。長い URL や英単語が入ると、親からはみ出します。折り返してよい要素に min-width: 0 を指定すると収まります。Grid の場合は minmax() の最小値を 0 にします。

高さが揃わない・揃いすぎる

Flexbox は既定で子要素の高さが揃います。揃えたくない場合は align-items: flex-start を指定します。逆にカードの高さを揃えたいのに揃わない場合は、カード自体ではなく中のラッパーに高さが効いていないかを確認します。

余白を margin で付けてしまう

並べる間隔は gap で指定します。margin で付けると、折り返したときに端の余白が残り、左右が揃わなくなります。gap は Flexbox でも使えます。

列数をスマホで変える

Grid なら grid-template-columns をメディアクエリで切り替えます。repeat(auto-fit, minmax(240px, 1fr)) と書くと、画面幅に応じて列数が自動で変わるため、メディアクエリ自体が不要になる場面もあります。

古いサイトを改修するとき

数年前に作られたサイトでは、float と clearfix で組まれていることがあります。部分的に Flexbox に置き換えると、その周辺だけ挙動が変わって崩れます。レイアウトの仕組みを変えるなら、そのセクションごとまとめて書き直すほうが結果的に早く済みます。

当社では、改修のお見積り時に既存のCSSがどの方式で組まれているかを確認し、部分修正で済む範囲と、書き直したほうがよい範囲を分けてご提示しています。