こんにちは、阿久梨絵です!
CSS でレイアウトを組むとき、こんな悩みありませんか?
・「フレックスかグリッド、どっち使えばいいの?」
・「なんとなくフレックス使ってるけど、正解か分からない」
・「行と列をキレイにそろえる方法って…?」
この記事では、フレックスとグリッドの違いを“図解と思考の軸”で整理しながら、実務で迷わない選び方をお届けします。
ざっくり違いを一言でいうと…
レイアウト方式 | 主に得意なこと | 思考のイメージ |
---|---|---|
フレックス(flexbox) | 横1列/縦1列での並べ方・間隔の調整 | 要素の“並び”を調整 |
グリッド(grid) | 行×列の2次元配置・複雑なマス目設計 | “面”を先に設計して、その上に要素を配置 |
よくあるレイアウトをどっちで作る?
やりたいこと | おすすめ |
---|---|
横並びのナビゲーションメニュー | フレックス |
カード一覧で3列 × 複数行 | グリッド |
中央揃え(上下左右) | フレックス |
ギャラリーのマス目配置 | グリッド |
テキストと画像を横並びにする | フレックス(+ ラップ) |
行/列を指定して構成するデザイン | グリッド一択 |
結論:1方向ならフレックス、2方向ならグリッド
実務で迷わない「選び方の軸」
1. 要素の“数”や“順番”が可変か?
→ 可変ならフレックスが柔軟に対応しやすい
2. 上下・左右の構造を“揃える必要”があるか?
→ あるならグリッドで設計ベースを固定
3. 間隔調整したいだけ?
→ それならフレックス + gap で充分
4. 媒体ごとに見え方を変える必要があるか?
→ レスポンシブ対応では、グリッドのminmax()やauto-fitが活躍!
実際に並べてみよう(CSSコード例)
/* フレックス:横並びのメニュー */
nav ul {
display: flex;
justify-content: space-between;
}
/* グリッド:3列レイアウト */
.section-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
フレックスからグリッドへ“移行すべき”ケースも
・「微調整が複雑すぎてCSSがごちゃついてきた」
・「デザインが“行×列”の構造になってきた」
そんなときは、“構造を先に決められるグリッド”へ移行するほうがスッキリします。
まとめ
フレックスもグリッドも、優劣ではなく“使いどころ”が違うだけ。
デザインの構造にあわせて選べば、 CSS はもっと自由に、そして見通しよく書けます。
CSSに迷ったときは「1列か?」「2軸か?」の問いかけがヒントになりますよ。
阿久梨絵でした!