Как расположить 5-ый блок с помощью grid

Question

Имеется трехколоночная сетка, как расположить 5 блок чуть выше.

.gallery__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 2fr;
    grid-gap: 12px;
}
.gallery__item {
    border-radius: 4px;
}
.gallery__item:nth-child(1) {
    width: 425px;
    height: 392px;
}
.gallery__item:nth-child(2) {
    width: 424px;
    height: 266px;
}
.gallery__item:nth-child(3) {
    width: 425px;
    height: 392px;
}
.gallery__item:nth-child(4) {
    width: 425px;
    height: 266px;
}
.gallery__item:nth-child(5) {
    width: 424px;
    height: 392px;
}
.gallery__item:nth-child(6) {
    width: 425px;
    height: 266px;
}

.gallery__item img {
    border-radius: 4px;
    width: 100%;
    height: 100%;
}

<div class="gallery__list">
    <div class="gallery__item">
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
    </div>
    <div class="gallery__item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
    </div>
    <div class="gallery__item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
    </div>
    <div class="gallery__item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
    </div>
    <div class="gallery__item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
    </div>
    <div class="gallery__item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
    </div>
</div>

Answer 1

Для реализации данной раскладки, необходимо 3 строки (row) - собственно, по одной строке для содержимого, и плюс ещё одна строка, если контент пересекается.

.gallery__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, min-content);
  grid-gap: 12px;
}

.gallery__item { border-radius: 4px; }

.gallery__item:nth-child(odd) { width: 425px; height: 392px; }
.gallery__item:nth-child(even) { width: 424px; height: 266px; }

.gallery__item:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.gallery__item:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.gallery__item:nth-child(3) { grid-area: 1 / 3 / 3 / 4; }
.gallery__item:nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
.gallery__item:nth-child(5) { grid-area: 2 / 2 / 4 / 3; }
.gallery__item:nth-child(6) { grid-area: 3 / 3 / 4 / 4; }

.gallery__item img {
  border-radius: 4px;
  width: 100%; height: 100%;
}

<div class="gallery__list">
  <div class="gallery__item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
  </div>
  <div class="gallery__item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
  </div>
  <div class="gallery__item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
  </div>
  <div class="gallery__item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
  </div>
  <div class="gallery__item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
  </div>
  <div class="gallery__item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7IPKyjg2k60ZzWsUH4i2CMn5M2NJSzR8IrT4PMg0G3yYtV_bSJPnXppuFWVmk5rchBWg&usqp=CAU" alt="Фотография">
  </div>
</div>

БЛОГ НА HUSL

Как расположить 5-ый блок с помощью grid

Ответы (1 шт):