WEBコーディング
レイアウトでもう迷わない！
FlexboxとGridレイアウトの使い分け

コーディングをしていると、「とりあえずFlexboxで並べる」ことが多くなりがちですよね。
そこにもうひとつ、Gridレイアウトという選択肢を持っておくと、レイアウトの考え方がぐっと楽になります。

 HTML/CSSを学び始めて、Flexboxは少し使ったことがあるけれど、
Gridレイアウトはよく分からない…という方に向けて書いています。

今回は、FlexboxとGridレイアウトを比べながら、それぞれの得意な役割を一緒に確認していきましょう。

Flexboxは「1方向の並びを整える」のが得意、

Gridレイアウトは「2次元で配置を設計する」のが得意、

という違いがあります。

まずはFlexboxから見ていきましょう。

Flexboxは「並べる・揃える」が得意

ヘッダーを作るとき、よく使われるのがFlexboxです。
ロゴとナビゲーション、ログインボタンなどを横に並べたい場面で、とても扱いやすいレイアウト方法です。

Flexboxが得意なのは、要素を横一列に並べたり、縦方向に並べ替えたりすること。
また、中央揃えや等間隔の配置も、少ないコードで実現できます。

レイアウトの考え方としては、横方向か縦方向、どちらか一方向を基準に整えるのがFlexboxの特徴です。

Flexboxは中身のサイズが変わっても安心

まずは「横並びにしたいときはFlexbox」と覚えている方も多いかもしれませんね。
たとえばヘッダー部分では、次のような変化がよく起こります。

• ナビゲーションの文字数が変わる
• メニュー項目が増えたり減ったりする
• ボタンのラベルが少し長くなる

といったことがよく起こります。

Flexboxは、こうした中身のサイズや量が変わっても、全体の並びを保ってくれるのが大きな強みです。
コンテンツの大きさに合わせて要素が調整されるため、レイアウトが破綻しにくくなります。

ヘッダーをFlexboxで作ってみる

ここでは、よくあるヘッダーを例に挙げてみましょう。

上が完成例。
下は「レイアウト構成図」といって、HTMLの構成を図に起こしたものです。
視覚的に構造が分かると思います。

このヘッダーの全コードは以下のとおり。

では解説です。

まずはヘッダー部分です。ヘッダーの中には、<h1>と<nav>がありますね。
display: flex; で<h1>と<nav>を横並びにしました。

横並びにした<h1>と<nav>を、ヘッダーの中で両端揃えにするため、justify-content: space-between; を指定しました。

<h1>のロゴと<nav>の高さが合わず、ガタつくため、align-items: center; で垂直方向中央に揃えました。

次に、メニュー部分です。<li>の並びを指定しています。
display: flex; でリストを横並びに。
gap: 48px; で、リスト同士の余白を48px空けました。
このgapプロパティは、display:flex; や次に紹介するdisplay:grid; を指定した際に使うことができる便利なプロパティです。
要素と要素の「間」だけに、均等な余白を入れたいときに向いています。
一方、marginで余白を指定すると、最後の要素にも余分な余白がついてしまって「どこまでが要素で、どこからが余白なのか」が分かりにくくなることがあります。
そのため、横並びや縦並びの要素間隔をそろえたい場合にgapを使うと、レイアウトをシンプルに保つことができます。

このように、「並べたい」「揃えたい」という目的がはっきりしている場合、Flexboxはとても直感的に使えます。

Gridレイアウトは「配置を先に決めたいとき」に強い

Gridレイアウトは、先にレイアウトの枠組みを作ってから、中身を配置していく考え方です。
まず行と列でグリッドを引き、「そこに何を置くか」を決めていきます。
Flexboxが「中身をどう並べるか」を考えるのに対して、Gridレイアウトは「どこに何を配置するか」を考えるのが得意です。

Gridレイアウトは、紙の上に罫線を引いてレイアウトを考える感覚に近いかもしれません。
前回の記事でご紹介したBentoレイアウトも、Gridレイアウトを使って実装されています。
まずはお弁当箱のように仕切りを作って、そこに具材を詰めていく、そんなイメージですね。

要素数が決まっているページは、Gridが使いやすい

Gridレイアウトは行と列でレイアウトを設計するため、あらかじめ要素の数や配置が決まっている部分で力を発揮します。

大きな部分に使われることも多いのがGridレイアウトです。
たとえば、以下の図のように、ページ全体の大まかな区分けをする場合。
ヘッダー、メイン、サイドの大きな領域は変更となることが少ないため、あらかじめ要素の数や配置が決まっていると言えます。
こうしたケースでは、Gridレイアウトを使うことで配置が安定し、後から調整する手間も少なくなりますよ。

他にも、ポートフォリオサイトのWorks（制作実績）一覧などに使えると便利かもしれませんね。
というわけで、今からWorks（制作実績）一覧のコードを確認していきましょう。
Flexboxで横一列に作品を並べるのも良いですが、ボックスの大きさに変化をつけて、マンネリ化しがちなレイアウトを打破することができますよ。
こんなレイアウトです。

サンプルでは各領域を色分けしていますが、作品画像が入っていると想定してください。

では、全コードです。

では、部分ごとの解説です。

まずGridレイアウトを使う際は、display: grid; と書く必要があります。
grid-template-columnsで「何列にするか？」を指定します。
今回は４列にしたいので、1fr 1fr 1fr 1fr;と書きました。
「fr」という単位は「fraction（分数）」を表す単位で、今回の場合だと4分の1、つまり「横幅を4つに分けて、それぞれを同じ幅にしてね」という指示になります。
もちろん「px」や「%」など、他の単位も使えますが、レイアウト全体を均等に分けたい時は、「fr」を使うのがとても便利です。

そしてgrid-template-rows: 120px 120px 120px 120px; で、4行、1行ずつの要素の高さを指定しています。
実際の制作では、全ての行をpxで固定することはあまりないのですが、今回は、レイアウトの形がイメージしやすいように、あえて行の高さをpxで指定しています。

最後に、.mainや.work2〜.work5までのそれぞれの画像が入る場所を指定していきます。
ここでは、次のプロパティを使っています。

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

columnは列（縦方向）、rowは行（横方向）の意味です。

下の図を見てください。

最小サイズの箱を基準に、等間隔に列と行にグリッドを引きます。
今回は4列×4行にしたかったので、縦・横それぞれに5本ずつ線が引かれている状態になります。

たとえば.mainには、次のような指定があります。

　grid-column-start: 1;

　grid-column-end: 3;

これは、「列の1本目の線から、列の3本目の線までの範囲を使います」という意味です。
つまり、横に2マス分の幅を取っている、ということですね。

ということは、

　grid-row-start: 1;

　grid-row-end: 5;

と指定しているので、「行の1本目の線から、行の5本目の線まで」を使い、上から下まですべての行を使うよ〜という形になりますね。

このようにGridレイアウトは、グリッドの線をきちんと数えられれば、とても素直に使えるプロパティです。
ただし、実際にやってみると「数えるのが間違いやすい」「毎回考えるのがちょっと面倒」と感じることもありますよね。
さらに、Gridレイアウトには書き方や指定できる単位がたくさんあるんです。
でも、大丈夫！
実務では、ここまで細かく手で指定しないことも多いです。
まずは形を作ってくれるツールを使うのも、立派なやり方ですよ。
ここは専用のジェネレータを使って、ラクをしてしまいましょうね！

CSS Grid Generator（https://cssgrid-generator.netlify.app/）

迷ったときのシンプルな判断基準

FlexboxとGridレイアウト、「どっちを使えばいいんだろう？」と迷うこと、ありますよね。
ここでは、判断のヒントになる基準をまとめてみました。
迷ったときの目安として、参考にしてみてください。

▼変化に強い！Flexboxを選ぶ基準

• 1行もしくは1列のレイアウト
• 要素を「並べる・揃える」ことが目的のとき
• 要素数や中身が変わる可能性がある

▼固定したい時！Gridレイアウトを選ぶ基準

• 行と列で全体の構造を設計したい
• 配置がずれにくく、意図したレイアウトを保ちたい
• 要素数や配置があらかじめ決まっている

とはいえ、どちらが正解・不正解というわけではありません。
その都度「何をしたいか？」を考えて、目的に合ったレイアウト方法を選んでいけるといいですね。

おまけ

レイアウトに関するコーディングが苦手と感じている方は、ゲームで楽しく学ぶという方法もありますよ。

Flexboxが苦手な方は、こちらのカエルさんのゲームを試してみてはいかがでしょうか（https://flexboxfroggy.com/#ja）。
葉っぱの上に、上手にカエルさんたちを乗せてあげてくださいね。

Gridレイアウトのゲームもありますよ（https://cssgridgarden.com/#ja）。
コーディングしてニンジンを育てましょう♪

おわりに

実務では、GridレイアウトとFlexboxを組み合わせて使うことも多くあります。
ただ今回は、それぞれの役割の違いを知ることをいちばんの目的としてご紹介しました。
まずは「ここは並べたいからFlexbox」「ここは配置を決めたいからGrid」
そんなふうに、シンプルに考えてみてください。
できそうなところからで大丈夫です。
ぜひ、ご自身の作品やポートフォリオの一部に、少しずつ取り入れてチャレンジしてみてくださいね。

関連記事