CSS ・ Flexbox・Grid
Grid と Flexbox の違い
線を引いて当てはめるか、子要素ごとに幅を決めるか
Grid と Flexbox はどちらも要素を並べるためのしくみですが、考え方が違います。Flexbox は子要素ごとに幅を決め、Grid は親要素で線を引いてから子要素を当てはめます。
01
サンプルコード
HTML
1<p class="label">grid</p>
2<div class="grid">
3 <div class="box_01"></div>
4 <div class="box_02"></div>
5 <div class="box_03"></div>
6 <div class="box_04"></div>
7 <div class="box_05"></div>
8 <div class="box_06"></div>
9</div>
10<p class="label">flex</p>
11<div class="flex">
12 <div class="box_01"></div>
13 <div class="box_02"></div>
14 <div class="box_03"></div>
15 <div class="box_04"></div>
16 <div class="box_05"></div>
17 <div class="box_06"></div>
18</div>
CSS
1.label {
2 margin: 4px 0;
3 font-size: 12px;
4}
5.grid, .flex {
6 height: 80px;
7 background-color: #ddd;
8}
9/* grid：親で線を引く */
10.grid {
11 display: grid;
12 grid-template-columns: 1fr 1fr 1fr;
13 grid-template-rows: 1fr 1fr;
14}
15/* flex：子要素ごとに幅を決める */
16.flex {
17 display: flex;
18 flex-wrap: wrap;
19}
20.flex div {
21 width: 33.333%;
22}
23.box_01 { background-color: red; }
24.box_02 { background-color: green; }
25.box_03 { background-color: blue; }
26.box_04 { background-color: yellow; }
27.box_05 { background-color: cyan; }
28.box_06 { background-color: purple; }
02
実行結果
ブラウザでの表示見た目は同じ3列×2行ですが、grid は親で列と行を決め、flex は子要素それぞれに幅を決めています
03
解説
違い1：並べ方の考え方。Flexbox は、横並びにして子要素の幅や配置を決めていきます。Grid は、どのように配置するか先に線を設定して、区切られた領域に子要素を当てはめていきます。
違い2：幅や高さを書く場所。Flexbox は子要素（アイテム）に横幅や高さを指定します。Grid は親要素に横幅や高さを指定します。上の例でも、flex は .flex div に width を書き、grid は .grid に grid-template-columns と grid-template-rows を書いています。
Flexbox は子要素ごとに幅を決める分、柔軟な対応ができます。一方 Grid は、行や列の数や幅が増えるほど実装が複雑になる可能性があります。ただし、マスをまたぐようなレイアウトは Grid を使うと簡単に作れるので、両方使いこなせるようになっておくことが大切です。
04
応用例・注意点
Grid と Flexbox の比較
| 比べること | 説明 |
|---|---|
並べ方 | flex：横並びにして子要素の幅や配置を決めていく ／ grid：線を設定して、区切られた領域に子要素を当てはめていく |
幅・高さを書く場所 | flex：子要素（アイテム） ／ grid：親要素（コンテナ） |
得意なこと | flex：1列に並べる・中身に合わせて柔軟に伸び縮み ／ grid：行と列がある格子状・マスをまたぐ配置 |
注意 | grid は行と列の数や幅が増えるほど、コードが複雑になりやすい |
Grid だと簡単に作れるレイアウト
大きさの違うパネルを組み合わせたレイアウトは、Flexbox だと入れ子が必要になりますが、Grid ならライン番号を指定するだけで作れます。
HTML
1<div class="panels">
2 <div class="a"></div>
3 <div class="b"></div>
4 <div class="c"></div>
5 <div class="d"></div>
6 <div class="e"></div>
7 <div class="f"></div>
8</div>
CSS
1.panels {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 grid-template-rows: repeat(3, 60px);
5 gap: 6px;
6}
7.panels div {
8 background: #3a93c8;
9 border-radius: 6px;
10}
11.b { grid-column: 2 / 3; grid-row: 1 / 3; }
12.d { grid-row: 2 / 4; }
13.f { grid-column: 2 / 4; }
注意点
- 01どちらか一方だけを使う必要はありません。ページ全体の枠組みを Grid、その中のボタンやメニューの横並びを Flexbox、のように組み合わせて使えます。
- 02迷ったら「1方向に並べるだけなら Flexbox、縦と横の両方をそろえたいなら Grid」と考えると選びやすくなります。