Webサイトのレイアウトを組むときによく使われるのが、FlexboxとCSS Gridです。
どちらも要素を配置するためのCSSレイアウトですが、「何が違うの？」「どちらを使えばいいの？」と迷う方も多いのではないでしょうか。
私自身、以前はFlexboxを中心に使い、実制作でも多くのレイアウトをFlexboxで組んでいました。Flexboxを理解すれば、一般的なWebサイトで必要になるレイアウトの多くに対応できると感じています。一方で、制作を重ねる中でCSS Gridも取り入れるようになり、それぞれの得意なレイアウトに合わせて使い分けることで、よりシンプルに、整ったレイアウトを組めるケースがあることが分かりました。
また、実際のWeb制作ではFlexboxとCSS Gridのどちらか一方だけを選ぶのではなく、外側のレイアウトにはGrid、内部の要素配置にはFlexboxというように、組み合わせて使うこともあります。
この記事では、FlexboxとCSS Gridの基本的な違いから、それぞれに向いているレイアウト、実制作での使い分け方までわかりやすく解説します。
FlexboxとCSS Gridの違い
FlexboxとCSS Gridは、どちらもWebページのレイアウトを作るために使われるCSSの機能です。
どちらを使っても同じようなレイアウトを作れるケースは多いため、はじめのうちは「結局どちらを使えばいいの？」と迷いやすいかもしれません。
大きな違いとして、Flexboxは要素を横方向または縦方向に並べることを得意とし、CSS Gridは行と列を使ってレイアウト全体の枠組みを作ることを得意としています。
Flexboxは要素を並べるのが得意
Flexboxは、複数の要素を横並びにしたり、縦に並べたりするときに便利です。
たとえば、以下のようなレイアウトでは、Flexboxを使うとシンプルに実装できます。
また、flex-wrapを使えば要素を折り返すこともできるため、Flexboxだけでも多くのWebサイトのレイアウトを作ることができます。
CSS Gridは「列」を作るレイアウトが得意
CSS Gridは、複数の要素を一定の列数で整えて並べたいときに便利です。
たとえば、以下のようなレイアウトではCSS Gridが使いやすいでしょう。
特に、複数の要素を「3列にする」「4列にする」というように、列を基準としてレイアウトを整えたい場合にCSS Gridの便利さが分かりやすくなります。
たとえば、カードを3列で並べる場合を考えてみましょう。
Flexboxでも3列のカードレイアウトを作ることはできますが、カードの横幅を揃えながらgapで間隔を空ける場合、要素の横幅を計算して指定する必要が出てくることがあります。
3列の場合、カード同士の間には2つのgapが入るため、その分を差し引いて横幅を3等分しています。
/*-- flexbox レイアウト --*/
.card-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
width: calc((100% - 48px) / 3);
}一方、CSS Gridでは「3列にする」と指定すれば、列の幅を自動的に均等に分けることができます。
この場合、gapを考慮したうえで残った横幅を3列に分けてくれるため、カードごとの横幅を自分で計算する必要がありません。
/*-- Grid レイアウト --*/
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}5つのカードを並べた場合でも、
□ □ □
□ □のように3列の幅を保ったまま配置できます。
FlexboxとCSS Gridは「できる・できない」ではなく、得意なことが違う
Flexboxでも複数列のレイアウトを作ることはできますし、CSS Gridでも横並びのレイアウトを作ることができます。そのため、「このレイアウトは必ずFlexbox」「これは必ずGrid」と決まっているわけではありません。
使い分けを考えるときは、次のような考え方から始めると分かりやすいでしょう。
特にカード一覧のように、「3列」というレイアウトの枠組みを先に決めたい場合はCSS Gridが便利です。一方で、カード内部の画像・タイトル・ボタンなどを配置する場合はFlexboxが使いやすいこともあります。
実際のWeb制作では、どちらか一方だけを使うのではなく、それぞれの得意な部分を組み合わせてレイアウトを作ることもよくあります。
FlexboxとCSS Gridはどう使い分ける？
FlexboxとCSS Gridは、どちらか一方だけを使えばよいものではありません。
同じようなレイアウトをどちらでも作れる場合があるため、実際のWeb制作では「どちらの方が作りたいレイアウトをシンプルに表現できるか」を考えて選びます。
FlexboxとCSS Gridの使い分けに迷った場合は、作りたいレイアウトの特徴から考えると判断しやすくなります。まずは、以下の表を目安にしてみましょう。
※表は横にスクロールできます。
| 作りたいレイアウト | 選びやすい方法 | 理由 |
|---|---|---|
|
ナビゲーションや画像＋テキストなど、横・縦方向に要素を並べる 
|
Flexbox | 1方向の要素配置や位置調整がしやすい |
|
3列・4列のカード一覧など、複数の列を揃える 
|
CSS Grid |
列幅やgapをまとめて管理しやすい
|
|
要素が複数の行・列をまたぐ複雑なレイアウト 
|
CSS Grid | 行や列をまたぐ配置を直接指定しやすい |
|
カード一覧とカード内部など、役割が異なる配置 
|
Grid＋Flexbox | 外側と内側で、それぞれ得意な方法を使える |
あくまで使い分けの目安であり、同じレイアウトをFlexboxとCSS Gridのどちらでも作れるケースは多くあります。
要素を横や縦に並べたいならFlexbox
要素同士を横方向または縦方向に並べたり、位置を揃えたりしたい場合は、Flexboxが使いやすいケースが多くあります。
たとえば、画像とテキストを横に並べる、ナビゲーションを横並びにする、カード内部のアイコンやボタンの位置を整える、といったレイアウトです。
「いくつかの要素をどのように並べるか」を考える場合は、まずFlexboxを検討すると分かりやすいでしょう。
Flexboxの基本的な使い方や各プロパティなどについて、さらに詳しく知りたい方は、当社株式会社アステリズムのWeb制作事業「applism」のFlexbox解説記事も参考にしてください。
複数の行や列を揃えたいならCSS Grid
カード一覧など、複数の要素を「3列」「4列」のような決まった列に沿って配置したい場合は、CSS Gridが便利です。
CSS Gridでは先に列の構造を作れるため、カードごとの横幅を細かく計算しなくても、一定の幅や間隔で整ったレイアウトを作りやすくなります。
「要素をどう並べるか」よりも、「どのような列や行の中に配置するか」を考えたい場合は、CSS Gridを検討してみましょう。
迷ったときは「どちらがシンプルに書けるか」で考える
FlexboxとCSS Gridの使い分けに、絶対的な正解があるわけではありません。
Flexboxで問題なく作れるレイアウトを、無理にCSS Gridへ書き換える必要もありません。
反対に、Flexboxでカードの横幅を計算したり、要素ごとに細かな調整が必要になっている場合は、CSS Gridを使うことでCSSをシンプルにできることがあります。
「Flexboxで作れるか」「Gridで作れるか」ではなく、作りたいレイアウトに対して、どちらを使うと分かりやすく管理しやすいかを考えることが大切です。
FlexboxとCSS Gridは組み合わせて使える
FlexboxとCSS Gridは、どちらか一方だけを使う必要はありません。
実際のWeb制作では、ページ全体やカード一覧の配置にはCSS Gridを使い、その中の細かな要素配置にはFlexboxを使うというように、それぞれを組み合わせることがあります。
外側をCSS Grid、内側をFlexboxにする
たとえば、複数のカードを3列で並べるレイアウトを考えてみましょう。
カード一覧全体はCSS Gridを使って3列にすると、カードの横幅や間隔を揃えやすくなります。
一方、それぞれのカードの中では、「アイコンとタイトルを横に並べる」「テキストとボタンの位置を整える」「ボタンをカードの下部に配置する」といった細かなレイアウトが必要になることがあります。このようなカード内部の要素配置には、Flexboxが便利です。
つまり、「カード一覧の「枠組み」にはCSS Grid」「カード内部の「要素の並び」にはFlexbox」というように、役割を分けて使うことができます。
にゃんこすも、実制作では外側のレイアウトをCSS Gridで組み、その中の要素配置をFlexboxで整える方法をよく使っています。最初は少しややこしくても、両方使えるようになると便利🐱🐾
どちらか一方に決める必要はない
FlexboxとCSS Gridは、どちらが優れているという関係ではありません。
それぞれ得意なレイアウトが異なるため、作りたいデザインに合わせて使い分けたり、必要に応じて組み合わせたりすることが大切です。
「Flexboxで作るか、Gridで作るか」と最初から一つに決めるのではなく、
レイアウト全体の構造はGrid、細かな要素配置はFlexboxというように、レイアウトの役割ごとに考えると使いやすくなります。
まとめ
FlexboxとCSS Gridは、どちらもWebサイトのレイアウトを作るために便利なCSSの機能です。Flexboxは、要素を横方向や縦方向に並べたり、位置を整えたりするレイアウトが得意です。一方、CSS Gridは、カード一覧のように複数の行や列を揃えて配置したいときに便利です。
どちらか一方だけを使えばよいわけではなく、以下のように作りたいレイアウトに合わせて使い分けることが大切です。
Web制作では、同じ見た目を複数の方法で実装できることも少なくありません。
そのため、プロパティの書き方を覚えるだけではなく、「なぜこのレイアウトではFlexboxを使うのか」「なぜGridの方が管理しやすいのか」といった判断の考え方を身につけることも重要です。
AppRizzでは、HTML・CSSの基本だけでなく、実際のWeb制作を想定しながら、レイアウトの考え方や使い分けについても実践的に学ぶことができます。
独学でコードは書けるようになってきたものの、実制作でどの方法を選べばよいか迷う方は、ぜひAppRizzの学習内容もチェックしてみてください。
