css - 如何使用 css 网格构建此响应式网格

Question

enter image description here

.wrapper-grid {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr 1fr;
  grid-gap: 20px;
}
.wrapper-item {
  border: 1px solid black;
  height: 200px;
}
.wrapper-item:nth-child(1){
  grid-column: 1/3
}
.wrapper-item:nth-child(2){
  grid-column: 3/5
}
.wrapper-item:nth-child(3){
  grid-column: 1/2
}
.wrapper-item:nth-child(4){
  grid-column: 2/4
}
.wrapper-item:nth-child(5){
  grid-column: 4/5
}

<div class="wrapper-grid">
  <div class="wrapper-item">
  </div>
  <div class="wrapper-item">
  </div>
  <div class="wrapper-item">
  </div>
  <div class="wrapper-item">
  </div>
  <div class="wrapper-item">
  </div>
</div>

我试图用下面的 html 代码构建这个响应式网格。当它没有网格间隙时，没问题，第一行图像具有相同的宽度，第二行也具有相同的宽度。但是当我添加网格间隙时，第二行的第二个元素变得比他左右两侧的邻居大一点。我尝试使用 calc()，但它不起作用。你能帮我解决这个问题吗？

Answer 1

这是因为中间元素包含一个间隙，所以它的宽度是gap + 1fr，而其他元素只有1fr。尝试像下面这样改变，这样所有底部元素都将包含一个间隙和 2fr，因此它们将是相同的。顶部的将有 3fr + 2gap 并保持相等。

.wrapper-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
.wrapper-item {
  border: 1px solid black;
  height: 200px;
}
.wrapper-item:nth-child(1){
  grid-column: 1/4
}
.wrapper-item:nth-child(2){
  grid-column: 4/7
}
.wrapper-item:nth-child(3){
  grid-column: 1/3
}
.wrapper-item:nth-child(4){
  grid-column: 3/5
}
.wrapper-item:nth-child(5){
  grid-column: 5/7
}

<div class="wrapper-grid">
  <div class="wrapper-item">
  </div>
  <div class="wrapper-item">
  </div>
  <div class="wrapper-item">
  </div>
  <div class="wrapper-item">
  </div>
  <div class="wrapper-item">
  </div>
</div>