こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
「GridとFlex、どっち使えばいいの？」
これはWebデザインをやっている人なら、
一度は必ず悩むテーマです。
- Flexで組んでたけど途中で崩れる
- Gridにしたら逆にややこしくなる
- 結局どっちが正解かわからない
こんな状態、めちゃくちゃ多いです。
でも結論から言います。
GridとFlexの使い分けは、実は“たった2行”で決まります。
しかもこのルールを知るだけで、
8割のレイアウトは迷わなくなります。
この記事では、小学生でもわかるレベルまで噛み砕いて、
「なぜそうなるのか」までしっかり解説します。
読み終わる頃には、
レイアウトで迷う時間が一気に減ります。
結論：この2行だけ覚えればOK
これだけです。
本当にこれだけで判断できます。
Flexboxとは？一方向のレイアウトマスター
イメージは「一列に並べる」
Flexboxはシンプルです。
- 横に並べる
- 縦に並べる
- 並び順や間隔を調整する
つまり、
“一方向だけをコントロールする仕組み”です。
具体例：横並びメニュー
.container {
display: flex;
gap: 16px;
} これだけで、要素は横に並びます。
たった2行で完成です。
どんな時に使う？
- ナビゲーションメニュー
- ボタンの横並び
- カードの1列配置
NGな使い方
Flexでやりがちな失敗です。
例えば、
表のようなレイアウト
カードが縦横に並ぶ配置
これをFlexでやると、
一気に地獄になります。
Gridとは？2次元レイアウトの最強ツール
イメージは「マス目を作る」
Gridはこう考えると簡単です。
“縦と横の線を引いて、マスを作る”
そのマスの中に要素を置くイメージです。
具体例：カード一覧
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
} これで、
- 横3列
- 縦にどんどん増える
レイアウトが完成します。
どんな時に使う？
- カード一覧
- ギャラリー
- ダッシュボード
Gridの強み
Flexではできないことが簡単にできるのがGridです。
迷ったときの判断フロー
ここが実務で一番使えます。
- まずFlexで考える
- 「縦横両方いじりたい」と思ったらGrid
- それ以外はFlexでOK
迷ったらFlex、複雑ならGrid。
これだけでOKです。
実務でよくあるパターン
パターン①：ヘッダー
ロゴ＋メニュー
→ FlexでOK
パターン②：記事一覧
カードが並ぶ
→ Gridが最適
パターン③：ボタン配置
横並び・中央揃え
→ Flex
パターン④：複雑なLP
セクションごとに配置が違う
→ Grid＋Flex併用
実務では“組み合わせる”のが普通です。
初心者がハマる落とし穴
- 全部Gridでやろうとする
- Flexで無理やり2次元を作る
- 使い分けの基準がない
これ、全部NGです。
どっちがすごいかではなく、どっちが合っているかです。
まとめ
- Flex → 1方向
- Grid → 2方向
- 迷ったらFlex
- 複雑ならGrid
このルールだけで、レイアウトは一気に楽になります。
Webデザインで悩む時間は、
「知らないから」ではなく
「判断基準がないから」です。
今回のルールを覚えるだけで、
その悩みはかなり減ります。
次にコーディングするとき、ぜひ意識してみてください。
satokotadesignキャンペーン実施中！
