Как построить эту адаптивную сетку с сеткой CSS

Question

введите описание изображения здесь

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