Как через grid совместить 3 ячейки в 2 строки?

Question

.wrapper {
    height: 200px;
    display: grid;
    grid-template-areas:
        "col1 col1"
        "col2 col4"
        "col3 col5";
    grid-template-rows: 28px 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}
.wrapper > div {
    border: 1px solid #cfcfcf;
}
.col1 {
  grid-area: col1;
    grid-column: 1 / -1;
}
.col2 {
    grid-area: col2;
}
.col3 {
    grid-area: col3;
}
.col4 {
    grid-area: col4;
}
.col5 {
    grid-area: col5;
}
.col6 {
    grid-area: col6;
}

<div class="wrapper">
  <div class="col1">header</div>
  <div class="col2">2</div>
  <div class="col3">3</div>
  <div class="col4">4</div>
  <div class="col5">5</div>
  <div class="col6">6</div>
</div>

В такой вид

Answer 1

Пример

.wrapper {
  height: 200px;
  display: grid;
  grid-template-rows: 28px 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
}

[class*=col] {
  border: 1px solid #cfcfcf;
}

.col1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.col2 {
  grid-column: 1 / 2;
  grid-row: 2 / 5;
}

.col3 {
  grid-column: 1 / 2;
  grid-row: 5 / 8;
}

.col4 {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

.col5 {
  grid-column: 2 / 3;
  grid-row: 4 / 6;
}

.col6 {
  grid-column: 2 / 3;
  grid-row: 6 / 8;
}

<div class="wrapper">
  <div class="col1">header</div>
  <div class="col2">2</div>
  <div class="col3">3</div>
  <div class="col4">4</div>
  <div class="col5">5</div>
  <div class="col6">6</div>
</div>

БЛОГ НА HUSL

Как через grid совместить 3 ячейки в 2 строки?

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