問題1: グリッドアイテムが表示されない

問題

display: gridを指定したのに、子要素がグリッドレイアウトにならず、通常の縦並びのままです。なぜでしょうか？

HTML

<div class="grid-container">
  <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 class="item">アイテム6</div>
</div>

CSS

.grid-container {
  display: grid;
  /* グリッドの列や行の定義がない */
  background-color: #f0f0f0;
  padding: 10px;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  margin: 5px;
}

実行結果

アイテム1
アイテム2
アイテム3
アイテム4
アイテム5
アイテム6

※ 縦に並んでしまい、グリッドレイアウトになっていません

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSの grid-template-columns: repeat(3, 1fr); を追加して、違いを確認してみましょう。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

display: gridだけではグリッドレイアウトは完成しません。

グリッドのテンプレート（列や行の定義）が必要です。

grid-template-columnsやgrid-template-rowsを使って、グリッドの構造を定義する必要があります。

解答

クリックして解答を表示

問題の原因

display: gridを指定しただけでは、デフォルトで1列のグリッドになるため、縦並びのレイアウトになります。

技術的な説明

  • display: grid：要素をグリッドコンテナにする
  • デフォルトの挙動：1列×n行のグリッド（nはアイテム数）
  • grid-template-columns：列の数とサイズを定義
  • grid-template-rows：行の数とサイズを定義

グリッドレイアウトを有効活用するには、明示的にグリッドの構造を定義する必要があります。

修正方法

方法1: 固定幅の3列グリッド

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3列定義 */
  background-color: #f0f0f0;
  padding: 10px;
  gap: 10px;  /* グリッドアイテム間の隙間 */
}
修正後の結果
アイテム1
アイテム2
アイテム3
アイテム4
アイテム5
アイテム6

方法2: レスポンシブな3列グリッド（fr単位）

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 均等3列 */
  /* または repeat()関数を使用 */
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
fr単位での結果
アイテム1
アイテム2
アイテム3
アイテム4
アイテム5
アイテム6

方法3: 自動調整グリッド（auto-fit/auto-fill）

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* auto-fit: アイテムを拡大して空きスペースを埋める */
/* auto-fill: 空のグリッドセルを作成して埋める */

よく使うグリッドパターン

/* 基本的な2×3グリッド */
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px 100px;

/* 不均等な列幅 */
grid-template-columns: 200px 1fr 100px;

/* 最小・最大幅を持つレスポンシブグリッド */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* グリッドエリアを使った定義 */
grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

覚えておくポイント

  • display: gridだけではグリッドの構造が定義されない
  • grid-template-columnsで列の数とサイズを定義
  • fr単位は利用可能な空間の割合を表す
  • gapプロパティでアイテム間の隙間を設定（旧：grid-gap）
  • repeat()関数で繰り返しパターンを簡潔に記述