CSS：当网格项目数量未知时，如何订购网格项目？

Question

我正在处理如下所示的CSS网格布局：https://jsfiddle.net/ftL5zw0x/23/，我不知道我将拥有多少个项目。

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 8px;
}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1),
div:nth-child(8n+3), 
div:nth-child(8n+7),
div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2), 
div:nth-child(8n+4),
div:nth-child(8n+5), 
div:nth-child(8n+6) {
  grid-row: span 2;
}

<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>

布局看起来像我想要的那样，但是问题在于订购。每第6和第7个项目就会出现乱序，它们应该在布局保持不变的情况下切换位置。 （例如项目6和7）

我有什么方法可以仅通过CSS来实现这一目标吗？

Answer 1

首先更改选择器，它是不应该跨越7th的6th元素

这将把第6个元素向后移到作为前一个元素5th位置的网格流之后，向右移动>

但是我们可以强制每个6th元素的位置，因为我们知道它是第二列。

这将使7th和8th元素跟随6th元素，我们可以使用grid-auto-flow:row dense;修复此问题>

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: row dense;
  grid-gap: 8px;
}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1),
div:nth-child(8n+3),
div:nth-child(8n+6),
div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2),
div:nth-child(8n+4),
div:nth-child(8n+5),
div:nth-child(8n+7) {
  grid-row: span 2;
}

div:nth-child(8n+6) {
  grid-column: 2;
}
<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>

尽管第6和第7个项目appear

出现故障，但它们并没有出现故障。

查看项目5（span 2项目）。上半部分在第2行，下半部分在第3行，但将其放置在第2行。

与项目6相同。上半部分在第2行上，下半部分在第3行上。将其放置在第2行中，该行位于第3行之前，在第3行中是放置项7。

因此，将6放在7之前，将15放在16之前，依此类推，然后将所有内容按顺序放置。

使用CSS定位这些项目并不重要。

div:nth-child(8n+6),
div:nth-child(8n+7) {}
 
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 8px;

}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1), div:nth-child(8n+3), div:nth-child(8n+7), div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2), div:nth-child(8n+4), div:nth-child(8n+5), div:nth-child(8n+6) {
  grid-row: span 2;
}

div:nth-child(8n+6),
div:nth-child(8n+7) {
    background-color: lightgreen;
}
<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>
但是那又是什么呢？不确定是否有解决此问题的简便方法。

Answer 2

尽管第6和第7个项目appear