具有自动行的无限宽度CSS网格

Question

我需要创建自动宽度css网格，并在每8个元素后换行。

我不能更改HTML

标记和use flex css属性。使用CSS网格属性执行此操作。

我无法对第二行进行反向操作，因此，如设计中那样，它以窄卡开头。

.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>

我需要创建自动宽度的CSS网格，并在每8个元素后换行。我无法更改html标记并使用flex css属性。使用CSS网格属性执行此操作。我不能为......>

Answer 1

这是您要寻找的吗？

我希望您至少可以更改css，尽管此解决方案似乎有点hacky