如何使用CSS Grid构建响应式网格

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代码构建这个响应式网格。当没有grid-gap时，第一行图像具有相同的宽度，第二行也是如此。但是当我添加了grid-gap时，第二行中的第二个元素比左右邻居略大。我尝试使用calc()，但它不起作用。你能帮我解决这个问题吗？

- Vsevolod Fedorov

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>

- Temani Afif