grid-row, не могу понять почему не работает

#html #css #css3 #вёрстка #css_grid

Есть простой код: https://codepen.io/Vdodovych/pen/VQoYJy



.grid {
  display: grid;
}

.items {
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.items div:nth-child(2) {
  grid-column: 2 / 4;
}

.items div:nth-child(3) {
  grid-column: 1 / 3;
}

.items div:nth-child(4) {
  grid-column: 3;
  grid-row: 2 / 4;
}

.item {
  align-items: center;
  justify-items: center;
  height: 200px;
  background-color: brown;
  color: #fff;
  font-size: 25px;
}

  
item-1
  
item-2
  
item-3
  
item-4
  
item-5
  
item-6





По моей логике блок item-4 должен занимать 2fr по высоте (и вторую и третью линию
одновременно), но почему-то так не происходит.
Вот тут:

.items div:nth-child(4) {
  grid-column: 3;
  grid-row: 2 / 4;
}


Почему не сработало и как лечить?
    

Ответы

Ответ 1

Высота блоков "жестко" задана, поэтому и не реагирует 4-ый блок.



.grid {
  display: grid;
}

.items {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px 200px;
  grid-gap: 20px;
}

.items div:nth-child(2) {
  grid-column: 2 / 4;
}

.items div:nth-child(3) {
  grid-column: 1 / 3;
}

.items div:nth-child(4) {
  grid-column: 3;
  grid-row: 2 / 4;
}

.item {
  align-items: center;
  justify-items: center;
  background-color: brown;
  color: #fff;
  font-size: 25px;
}

  
item-1
  
item-2
  
item-3
  
item-4
  
item-5
  
item-6