CSS Gridレイアウト入門： flexよりコードが短くなる！実例で比較

Webサイトのレイアウト制作において、多くの場面で活用されているflexレイアウト。しかし、要素をきれいに整列させるために各パネルに margin-right を指定したり、擬似要素（:before / :after）で調整するなど、コードが複雑になってしまうことはありませんか。

そんな時、CSS Gridレイアウト（display: grid;）を使うと、より直感的でシンプルな記述でレイアウトを組める可能性があります。今回は、実際のWebサイトで使用されているflexレイアウトをgridレイアウトに置き換える例をご紹介します。

flexとgridのコード比較

flexレイアウトの例

このレイアウトでは、以下の指定を行っています。

• ulをflexで横並び・折り返し・両端揃えにする
• liに縦のマージンをつける
• パネルの数が中途半端な時でも左寄せになるよう、擬似要素で調整する

gridレイアウトへの置き換え

同じレイアウトをgridレイアウトに置き換えると、以下のようなコードになります。

flexと比べると記述量が減りました。ulの中だけでパネルのレイアウトを完結できるため、修正の際にも触る箇所が少なく済むのが大きなメリットです。

レスポンシブ対応もシンプルに

レスポンシブ対応を行う場合も、gridなら非常にシンプルな記述で対応できます。

@media only screen and (max-width: 640px) {
  ul {
    /* 横幅48%の子要素liを2つ横に並べる */
    grid-template-columns: repeat(2 , 48%);
    /* 左右の空きの指定 */
    gap: 0 4%;
  }
}

保守案件での注意点：IE11とgapプロパティ

2026年現在、多くのブラウザが最新仕様に対応していますが、古いシステムの保守案件では依然として注意が必要です。

IE11対応が必須の現場では、Autoprefixerを設定して使用するか、従来のmarginによる調整を検討してください。

各プロパティの最新の対応状況については、以下のサイトなどで確認することをおすすめします。

• caniuse (gap)
• caniuse (grid-gap)

まとめ

今回の例のような単純なグリッド形式のレイアウトであれば、gridの方が短いコードで実装できることが分かりました。今後、ページを作る際にはぜひ活用してみてください。

ただし、より複雑なレイアウトや、一方向への柔軟な整列が必要な場合は、flexの方が適しているケースもあります。デザインに応じて、両者を賢く使い分けていきましょう。

よくある質問

flexレイアウトとgridレイアウト、どちらを優先して使うべきですか？

基本的には、タイル状の並び（二次元）ならgrid、メニューバーなどの一方向の並び（一次元）ならflexが適しています。最近のWeb制作では、この2つを組み合わせて使うのが一般的です。

gapプロパティはflexレイアウトでも使えますか？

はい、使えます。以前はgrid専用でしたが、現在は多くのモダンブラウザでdisplay: flex;に対してもgapによる余白指定が可能です。これにより、子要素にmarginを振る手間が省けます。

IE11対応が不要な場合、grid-gapとgapどちらの名称を使うべきですか？

現在はgapという名称に統一されていますので、新規プロジェクトであればgapと記述するのが標準的です。grid-gapもエイリアスとして動作しますが、将来性を考えるとgapが推奨されます。