具有自动行的无限宽度 css 网格答案

【问题标题】：Unlimited width css grid with auto row具有自动行的无限宽度 css 网格
【发布时间】：2020-04-07 04:59:39
【问题描述】：

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

我无法更改 html 标记和使用 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 css-grid

【解决方案1】：

这就是你要找的吗？

我希望您至少可以更改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>

【讨论】：