Неограниченная ширина css сетка с авторядом - PullRequest
Новая
       13

Неограниченная ширина css сетка с авторядом

0 голосов
/ 02 апреля 2020

Мне нужно создать автоматическую ширину css сетку с разрывом на новую строку после каждого 8 элемента.

Я не могу изменить html разметку и использовать flex css собственность. Сделайте это с css свойство сетки.

enter image description here

Я не могу сделать обратный для второго ряда, так что он начинается с узкой карты, как в дизайне. 

.block-instagram {
  display: grid;
  grid-template-rows: repeat(2, 225px);
  grid-template-columns: repeat(4, 368px 225px);
  grid-gap: 2px;
}
.block-instagram__item {
  background: #e3e3e3;
}
<div class="block-instagram">
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
</div>

1 Ответ

1 голос
/ 06 апреля 2020

Это то, что вы ищете?

Я ожидаю, что вы, по крайней мере, можете изменить css, хотя это решение выглядит немного hacky . 

.block-instagram {
  display: grid;
  grid-template-rows: repeat(2, 225px);
  grid-template-columns: repeat(4, 225px 143px 225px);
  grid-gap: 2px;
}
.block-instagram__item {
  background: #e3e3e3;
}
/* This rule targets odd-numbered elements in items 1 to 8 */
.block-instagram__item:nth-child(-n + 8):nth-child(odd) {
  grid-column: span 2;
}
/* This rule targets even-numbered elements in items 9 to Infinity */
.block-instagram__item:nth-child(n + 9):nth-child(even) {
  grid-column: span 2;
}
<div class="block-instagram">
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
  <div class="block-instagram__item"></div>
</div>
...