1 3カードレイアウト
同じ幅のカード3つを並べたい
Card
Card
Card
Flexbox
display: flex;
gap: 1rem;
/* 子要素にも設定が必要 */
.card { flex: 1; }
gap: 1rem;
/* 子要素にも設定が必要 */
.card { flex: 1; }
Grid✓ 勝利
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
📌 ポイント: Gridは親だけでレイアウト完結。子は自動的に従う！
2 カード内ボタン配置
テキスト量が違ってもボタンを下部に固定
Flexbox
段落に flex-grow: 1 を設定して残りスペースを埋める
Grid✓ 勝利
grid-template-rows:
auto 1fr auto;
auto 1fr auto;
見出し(auto) → テキスト(1fr) → ボタン(auto)
📌 ポイント: 親のみでレイアウト完結！子要素の調整不要。
3 タグの折り返し配置
コンテンツに応じた自然な折り返し
CSS
JavaScript
HTML
React
Flexbox✓ 勝利
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex-wrap: wrap;
gap: 0.5rem;
各要素はコンテンツに応じた自然なサイズ
Grid
repeat(auto-fit, minmax())で可能だが複雑。全要素が同じ幅になる。
📌 ポイント: コンテンツ駆動の小要素にはFlexboxが最適！
4 垂直レイアウト
💙 Flexbox
display: flex;
flex-direction: column;
flex-direction: column;
縦横切り替えが簡単
💗 Grid
display: grid;
常に垂直ならコード短い
📌 判断基準:
常に垂直のみ → Grid
縦横切り替えあり → Flexbox
常に垂直のみ → Grid
縦横切り替えあり → Flexbox
5 ページ全体のレイアウト
Grid✓ 圧勝Nav
Aside
Main
Footer
grid-template-areas:
"nav nav"
"aside main"
"footer footer";
"nav nav"
"aside main"
"footer footer";
HTMLを変更せずにレイアウト変更可能
視覚的・直感的に管理できる
⚠️ Flexboxの問題: 1方向のみなので複数ネストが必要 → 煩雑に
6 フッター最下部固定
Grid✓ 勝利コンテンツが少なくてもフッターは最下部に
Nav
少ないコンテンツ
Footer
grid-template-rows:
auto 1fr auto;
auto 1fr auto;
ナビ(auto) → メイン(1fr = 残り全て) → フッター(auto)
📌 結果: メインが少なくてもフッターは常に最下部！