EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS Gridコンテナ

CSS Gridは強力な2次元レイアウトシステムで、行と列を同時に制御できます。

Gridコンテナのプロパティ

早見表

プロパティ 値 用途
display: grid — Gridコンテナを作成
grid-template-columns 100px 1fr 2fr、repeat(3, 1fr) 列の定義
grid-template-rows 100px auto、repeat(3, 100px) 行の定義
gap 10px、10px 20px アイテム間のギャップ
grid-template-areas "header header" "main aside" 名前付きグリッドエリア

fr単位

fr単位は残りのスペースを比例的に分配：

サンプル

HTML 
<style>
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 1:2:1の比率 */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">1fr</div>
  <div class="item">2fr（2倍の幅）</div>
  <div class="item">1fr</div>
</div>
▶ 試してみよう

repeat()

repeat()関数は繰り返しを削減：

サンプル

HTML 
<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1frと同じ */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">列1</div>
  <div class="item">列2</div>
  <div class="item">列3</div>
</div>
▶ 試してみよう

minmax() + auto-fill/auto-fit

列数を自動調整するレスポンシブグリッドを作成：

サンプル

HTML 
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  background: #f5f5f5;
  padding: 15px;
}
.item {
  background: #2ecc71;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
</style>
<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
▶ 試してみよう

auto-fillとauto-fitの違い：

grid-template-areas

名前付きエリアでレイアウトを定義：

サンプル

HTML 
<style>
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  gap: 10px;
  min-height: 100vh;
}
.header { grid-area: header; background: #2c3e50; color: white; }
.sidebar { grid-area: sidebar; background: #34495e; color: white; }
.main { grid-area: main; background: #ecf0f1; }
.aside { grid-area: aside; background: #34495e; color: white; }
.footer { grid-area: footer; background: #2c3e50; color: white; }
.layout > * { padding: 20px; display: flex; align-items: center; justify-content: center; }
</style>
<div class="layout">
  <header class="header">ヘッダー</header>
  <aside class="sidebar">サイドバー</aside>
  <main class="main">メインコンテンツ</main>
  <aside class="aside">アサイド</aside>
  <footer class="footer">フッター</footer>
</div>
▶ 試してみよう

❓ よくある質問

Q GridとFlexboxはどうやって選べばいいですか？
A 1次元（単一行または列）にはFlexboxを使用し、2次元（行と列を同時制御）にはGridを使用します。ほとんどのページは両方を使用します：ページ全体のスケルトンにGrid、ローカルの配置にFlexbox。1つのページで両方を使用するのは完全に正常です。
Q fr単位とパーセントの違いは何ですか？
A `fr`は残りのスペースを分配し、パーセントは合計幅を分配します。gapがある場合、`fr`は比率を計算する前にgapを自動的に差し引きますが、パーセントはそうしません。`1fr 1fr 1fr`とgapがあっても完璧な3分割ですが、`33.33% 33.33% 33.33%`はオーバーフローします。
Q grid-template-areasの使い方は？
A 名前付きエリアでレイアウトを定義します：`grid-template-areas: "header header" "sidebar main" "footer footer";`、その後`grid-area: header`で子要素を割り当てます。レイアウトを変更するには、文字列テンプレートを調整するだけで、子要素を再配置する必要はありません。

📖 まとめ

📝 演習

基本

  1. 3×3のグリッドコンテナを作成し、各セル100px×100px、gap10pxにしてください。
  2. 1fr単位で「2カラム」レイアウト（左1fr、右3fr）を作成してください。

中級

  1. repeat(auto-fill, minmax(150px, 1fr))で自動適応カードグリッドを作成し、ブラウザのサイズを変更して列の変化を確認してください。
  2. 「古典的な3行2カラム」レイアウトを作成してください：ヘッダー（2列にまたがる）、左メニュー、右コンテンツ、フッター（2列にまたがる）。

チャレンジ

  1. レスポンシブ画像ギャラリーを作成してください：デスクトップ4列、タブレット2列、モバイル1列、auto-fill + minmaxを使用。
  2. grid-template-areasで完全なブログレイアウト（ヘッダー、ナビゲーション、メインコンテンツ、サイドバー、フッター）を作成してください。
100%