問題3: グリッドの隙間が開かない

問題

grid-gapを指定したのに、グリッドアイテム間に隙間ができません。さらに、アイテムにmarginを指定すると予期しない余白ができます。

HTML

<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

CSS

.grid {
  display: inline-grid;  /* inline-gridに注目 */
  grid-template-columns: 100px 100px;
  grid-gap: 20px;  /* 古い書き方 */
  background-color: #f0f0f0;
}

.box {
  background-color: #9C27B0;
  color: white;
  padding: 20px;
  text-align: center;
  margin: 10px;  /* marginも設定 */
}

実行結果

1
2
3
4

※ 隙間が均等でなく、レイアウトが崩れています

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

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSの margin を削除して、gap の効果を確認してみましょう。

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

ヒント

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

グリッドレイアウトには2つの問題があります：

  1. grid-gapは古い書き方で、新しいgapプロパティが推奨
  2. グリッドアイテムのmarginはgapと併用すると二重の間隔になる

また、display: inline-gridとdisplay: gridの違いも確認しましょう。

解答

クリックして解答を表示

問題の原因

複数の問題が重なっています：

  1. grid-gapとmarginの併用による二重の間隔
  2. inline-gridによる予期しない挙動
  3. 古いプロパティ名の使用

gap と margin の違い

  • gap（旧grid-gap）：グリッドアイテム間の間隔のみ
  • margin：要素の外側全方向の余白
  • 両方使うと、gap + margin×2 の間隔ができる
  • inline-gridは行内要素として振る舞うため、幅が内容に合わせて収縮

修正方法

方法1: marginを削除してgapのみ使用

.grid {
  display: grid;  /* inline-gridからgridに変更 */
  grid-template-columns: 100px 100px;
  gap: 20px;  /* 新しい書き方 */
  background-color: #f0f0f0;
  padding: 10px;  /* コンテナの内側余白 */
}

.box {
  background-color: #9C27B0;
  color: white;
  padding: 20px;
  text-align: center;
  /* margin: 10px; を削除 */
}
修正後の結果
1
2
3
4

方法2: row-gapとcolumn-gapを個別指定

.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  row-gap: 30px;     /* 行間の隙間 */
  column-gap: 10px;  /* 列間の隙間 */
  background-color: #f0f0f0;
  padding: 10px;
}
行列で異なる間隔
1
2
3
4

display: grid vs inline-grid

プロパティ display: grid display: inline-grid
要素の種類 ブロックレベル インラインレベル
幅 親要素の幅いっぱい 内容に合わせて収縮
前後の要素 改行される 横に並ぶ
使用場面 通常のレイアウト 文中のグリッド

gapプロパティの進化

/* 古い書き方（後方互換性あり） */
grid-gap: 20px;
grid-row-gap: 20px;
grid-column-gap: 20px;

/* 新しい書き方（推奨） */
gap: 20px;              /* 行列同じ間隔 */
gap: 20px 10px;         /* 行20px、列10px */
row-gap: 20px;          /* 行のみ */
column-gap: 10px;       /* 列のみ */

/* Flexboxでも使える */
.flex-container {
  display: flex;
  gap: 10px;  /* Flexboxでもgapが使える */
}

覚えておくポイント

  • グリッドではgapを使い、marginは避ける
  • grid-gapよりgapを使用（新しい標準）
  • gapはFlexboxでも使用可能
  • inline-gridは特殊な用途向け、通常はgridを使用
  • コンテナの余白はpaddingで調整