問題4: アイテムが重なってしまう

問題

グリッドアイテムを配置したら、複数のアイテムが同じ場所に重なってしまいました。何が原因でしょうか？

HTML

<div class="grid-container">
  <div class="item1">アイテム1</div>
  <div class="item2">アイテム2</div>
  <div class="item3">アイテム3</div>
  <div class="item4">アイテム4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

.item1 {
  grid-column: 1 / 3;  /* 1列目から3列目まで */
  grid-row: 1;
  background-color: #FF6B6B;
}

.item2 {
  grid-column: 2 / 4;  /* 2列目から4列目まで */
  grid-row: 1;         /* item1と同じ行 */
  background-color: #4CAF50;
  opacity: 0.8;
}

.item3 {
  grid-column: 1;
  grid-row: 1 / 2;     /* 明示的に1行目から2行目 */
  background-color: #2196F3;
  opacity: 0.8;
}

.item4 {
  grid-column: 3;
  grid-row: 2;
  background-color: #FFC107;
}

実行結果

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

※ アイテム1、2、3が重なっています

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

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSのグリッド配置を修正して、重なりを解消してみましょう。

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

ヒント

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

グリッドラインの番号を確認してみましょう：

  • 3列のグリッドには4本の縦線があります（1〜4）
  • grid-column: 1 / 3は1列目から2列目まで（3の手前まで）
  • 複数のアイテムが同じセルを占有すると重なります

グリッドラインの数え方と、終了位置の指定に注意が必要です。

解答

クリックして解答を表示

問題の原因

複数のアイテムが同じグリッドセルを占有するよう指定されているため、重なりが発生しています。

グリッドラインの数え方

3列×2行のグリッドの場合：

  • 縦線（列）：1, 2, 3, 4（4本）
  • 横線（行）：1, 2, 3（3本）
  • grid-column: 1 / 3 = 1列目から2列目まで
  • grid-column: 2 / 4 = 2列目から3列目まで

現在の配置では：

  • item1: 1-2列目の1行目
  • item2: 2-3列目の1行目（item1と重なる）
  • item3: 1列目の1行目（item1と重なる）

修正方法

方法1: 重ならないよう配置を調整

.item1 {
  grid-column: 1 / 3;  /* 1-2列目 */
  grid-row: 1;        /* 1行目 */
  background-color: #FF6B6B;
}

.item2 {
  grid-column: 3;     /* 3列目のみ */
  grid-row: 1;        /* 1行目 */
  background-color: #4CAF50;
}

.item3 {
  grid-column: 1 / 3;  /* 1-2列目 */
  grid-row: 2;        /* 2行目 */
  background-color: #2196F3;
}

.item4 {
  grid-column: 3;     /* 3列目 */
  grid-row: 2;        /* 2行目 */
  background-color: #FFC107;
}
修正後の結果
アイテム1
アイテム2
アイテム3
アイテム4

方法2: z-indexで重なり順を制御

/* 重なることを前提に、表示順序を制御 */
.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: #FF6B6B;
  z-index: 1;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 1;
  background-color: #4CAF50;
  z-index: 2;  /* item1の上に表示 */
}

.item3 {
  grid-column: 1;
  grid-row: 1;
  background-color: #2196F3;
  z-index: 3;  /* 最前面に表示 */
}

方法3: spanキーワードを使用

/* spanで占有セル数を指定 */
.item1 {
  grid-column: 1 / span 2;  /* 1列目から2セル分 */
  grid-row: 1;
}

.item2 {
  grid-column: 3;  /* 3列目のみ */
  grid-row: 1 / span 2;  /* 1行目から2セル分（縦に伸びる） */
}

.item3 {
  grid-column: 1;
  grid-row: 2;
}

.item4 {
  grid-column: 2;
  grid-row: 2;
}

グリッド配置の記法

/* 様々な指定方法 */

/* 開始/終了ライン */
grid-column: 1 / 3;      /* 1から3の手前まで */
grid-row: 2 / 4;         /* 2から4の手前まで */

/* spanキーワード */
grid-column: 1 / span 2;  /* 1から2セル分 */
grid-row: span 2;        /* 自動配置から2セル分 */

/* 単一セル */
grid-column: 2;          /* 2列目のみ */
grid-row: 3;            /* 3行目のみ */

/* 負の値（末尾から） */
grid-column: -1;        /* 最後の列 */
grid-column: 1 / -1;    /* 最初から最後まで */

/* ショートハンド */
grid-area: 1 / 1 / 3 / 3;  /* row-start / col-start / row-end / col-end */

覚えておくポイント

  • グリッドラインはセルの間の線を数える（n列なら n+1本の線）
  • 終了位置は「その手前まで」という意味
  • spanキーワードでセル数を直接指定できる
  • 重なりを避けるには配置を慎重に計画
  • 意図的な重なりにはz-indexで順序制御
  • ブラウザの開発ツールでグリッド線を可視化すると便利