display: grid на 5 элементов

Question

Как правильно задать display: grid для пяти элементов блока так, чтобы три коротких блока были сверху, а два больших снизу?

Answer 1

Простой и понятный вариант на grid-template-areas

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template:
    'a a b b c c'
    'd d d e e e';
  width: 100%;
  max-width: 600px;
}

.grid__item {
  display: block;
  width: 100%;
  background-color: lightblue;
}

.grid__item::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 33%;
}

.grid__item:nth-child(1) {grid-area: a;}
.grid__item:nth-child(2) {grid-area: b;}
.grid__item:nth-child(3) {grid-area: c;}
.grid__item:nth-child(4) {grid-area: d;}
.grid__item:nth-child(5) {grid-area: e;}

<div class="grid">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>

БЛОГ НА HUSL

display: grid на 5 элементов

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