如何让CSS Grid布局中各div无缝相邻无间距？

我是CSS Grid布局新手，正在学习其用法。以下代码参考自MDN的CSS Grid布局文档。我希望消除每个div周围的空白，使其像目标布局那样紧密排列，尝试为每个div设置width和height后仍未解决问题，恳请帮助！

目标布局：紧密贴合的Grid布局
当前效果：元素周围存在空白的Grid布局

原代码 #

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 500px;
  grid-auto-rows: minmax(100px, auto);
}

.one {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 50%;
  height: 25%;
  background-color: red;
}

.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  width: 50%;
  height: 50%;
  background-color: blue;
}

.three {
  grid-column: 1;
  grid-row: 2 / 5;
  width: 40%;
  height: 75%;
  background-color: green;
}

.four {
  grid-column: 3;
  grid-row: 3;
  width: 30%;
  height: 25%;
  background-color: yellow;
}

.five {
  grid-column: 2;
  grid-row: 4;
  width: 30%;
  height: 25%;
  background-color: purple;
}

.six {
  grid-column: 3;
  grid-row: 4;
  width: 30%;
  height: 25%;
  background-color: grey;
}

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

解决方案 #

问题出在你给Grid子元素手动设置了width和height——这完全违背了Grid布局的核心逻辑：Grid子元素会自动填充它所占据的网格单元格区域，手动设置宽高只会让元素缩小，导致周围出现空白。另外网格容器的固定高度和行高设置也需要调整，才能实现紧密贴合的效果。

修改后的代码如下：

调整后的CSS #

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 移除固定height，让网格根据内容自动适配高度 */
  /* height: 500px; */
  /* 将行高改为auto，或根据需求设置固定值，确保内容填满行区域 */
  grid-auto-rows: auto;
  /* 强制移除网格间距，确保元素完全紧密贴合 */
  gap: 0;
}

.one {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: red;
  /* 删掉手动设置的width和height */
}

.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: blue;
}

.three {
  grid-column: 1;
  grid-row: 2 / 5;
  background-color: green;
}

.four {
  grid-column: 3;
  grid-row: 3;
  background-color: yellow;
}

.five {
  grid-column: 2;
  grid-row: 4;
  background-color: purple;
}

.six {
  grid-column: 3;
  grid-row: 4;
  background-color: grey;
}

HTML无需修改 #

关键修改说明 #

1. 删除子元素的width/height：Grid布局的核心就是让子元素填充指定的网格区域，手动设置宽高会强制缩小元素，直接导致空白出现。
2. 移除网格容器的固定height：固定高度会让网格容器强制保持500px，超出内容的部分会形成空白；改为自动高度后，网格会根据子元素的实际高度调整。
3. 调整grid-auto-rows：原minmax(100px, auto)会让行高至少100px，若内容不足会产生空白；改为auto后行高会完全适配内容高度。
4. 添加gap:0：确保网格单元格之间没有默认间距，让元素边缘完全贴合。

这样修改后，元素就会严格按照你设置的grid-column和grid-row规则填充对应的网格区域，实现和目标布局一致的紧密排列效果。

内容的提问来源于stack exchange，提问作者user18147081