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>

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

1 个答案: