如何让每个 div 彼此相邻，且之间没有任何空间

Question

我是网格新手，并试图了解它们是如何工作的。下面的代码是我直接从MDN - Css网格布局复制的。有人可以帮助我删除每个 div 周围的空白，以便它们可以像目标结构一样整齐地堆叠吗？任何帮助将不胜感激！”

• 
• 

.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;
}

<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>

我尝试为每个

div

添加宽度和高度，但得到了相同的结果。

Answer 1

您应该像这样删除宽度和高度：

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

.one {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  background-color: red;
  z-index: 2;
}

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

.three {
  grid-column: 1 / span 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;
}

<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>