FlexboxとGridで学ぶCSSレイアウト完全ガイド｜初心者向けサンプル付き

Flexboxとは？

Flexboxは要素を効率的に並べるためのCSSレイアウト手法です。特に横並びや縦並びの整列に強く、レスポンシブ対応も簡単です。

• 子要素を簡単に並べられる
• 中央揃え・余白調整が容易
• 複雑なfloatやpositionを使わずにレイアウト可能

.container {
  display: flex;
  justify-content: center; /* 横方向中央揃え */
  align-items: center;     /* 縦方向中央揃え */
}
  

Gridとは？

Gridは2次元レイアウトに特化したCSS手法です。行と列の両方を自由にコントロールでき、大規模レイアウトにも向いています。

• 行・列のサイズを自由に設定可能
• 複雑なレイアウトを簡単に表現できる
• Flexboxよりもマス目管理に適している

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3列レイアウト */
  grid-gap: 10px; /* 要素間の間隔 */
}
  

FlexboxとGridの使い分け

どちらもレイアウト手法ですが、使い分けのポイントは以下です：

• 1次元（横or縦）のレイアウト → Flexbox
• 2次元（行×列）のレイアウト → Grid
• 簡単な整列 → Flexbox、複雑なグリッド → Grid

練習サンプル

実際に手を動かしてFlexboxとGridを試してみましょう。

Flexboxサンプル

  
1
  
2
  
3



  

Gridサンプル

  
A
  
B
  
C
  
D



  

まとめ

• Flexboxは1次元レイアウトに最適
• Gridは2次元レイアウトに最適
• 実務ではFlexboxとGridを組み合わせると効率的
• 今回のサンプルをコピペして練習するのがおすすめ

さらに練習したい方は、CSSレイアウト練習ガイドも参考にしてください。