0

У меня есть хтмл код сетки, который не работает должным образом. Мне нужен вот такой результат:

введите сюда описание изображения

Но в итоге, код дает не тот результат, который нужен. Пожалуйста, подскажите, где я ошибаюсь. Спасибо.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow:dense;
  gap: 30px;
}

.item {
  background: grey;
}

.item:nth-child(6n + 1), .item:nth-child(6n + 6) {
  grid-row:span 2;
  grid-column:span 2;
}

.item:nth-child(6n + 5) {
  grid-column:1;
}

.item:nth-child(4n) {
  grid-column: span 2;
}
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

1 ответ 1

2

Немного поправил ваше решение

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
/*   grid-auto-flow:dense; */
  gap: 30px;
}

.item {
  background: grey;
}

.item:nth-child(8n+1) {
  grid-row: span 2;
}

.item:nth-child(8n+6) {
  grid-row: span 2;
}

.item:nth-child(4n) {
  grid-column: span 2;
}
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

1
  • Спасибо, добрый человек!
    – rabbit
    Commented 11 февр. 2022 в 12:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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