0

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

Пример

1
  • 1
    приложи свой код 3 июн 2020 в 17:58

2 ответа 2

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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.