Объединение колонок в GRID

Question

Наткнулась на проблему с объединением GRID колонок.

Answer 1

.cell:nth-child(6) {
    grid-column: 2/5;
}
.cell:nth-child(7) {
    grid-area: 3/1/5/3;
}

Answer 2

Объединять ячейки можно через сокращения grid-column, grid-row.

section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
}

div {
  border: 1px solid;
}

div:nth-child(6) {
  grid-column: 2 / 5;
  background-color: black;
}

div:nth-child(7) {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
  background-color: red;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

БЛОГ НА HUSL

Объединение колонок в GRID

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