当最后一行的项目少于n个时如何选择网格容器

Question

我有一个网格容器，每行中的项目数量是固定的。但物品总数未知。有没有办法仅当最后一行的项目少于 7 时才选择网格容器？

（我尝试根据最后一行中的项目数设置不同的网格容器样式。）

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 10px;
}

.item {
  grid-column: span 1;
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}

<div class="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 class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
</div>

Answer 1

关键是，如果最后一行中有 n 个或更少的项目，则最后 n 个项目中的恰好一个将成为其行中的第一个项目。如果最后一行中有超过 n 个项目，则最后 n 个项目都不能成为该行中的第一个项目。

因此，如果每行有

a

个项目，为了匹配最后一行有

b

或更少的项目，您可以使用：

.container:has(.item:nth-last-child(-n+b):nth-child(an+1)){
}

这可以扩展为使用:not选择最后一行中的

超过b个项目

：

.container:not(:has(.item:nth-last-child(-n+b):nth-child(an+1))){
}

现在，由于我们的目标是当最后一行的项目少于 7 个时选择容器（每行 10 个项目），因此我们可以得到

a=10, b=7-1=6

；选择器将为

.container:has(.item:nth-last-child(-n+6):nth-child(10n+1))

。

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 10px;
}

.item {
  grid-column: span 1;
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}

.container:has(.item:nth-last-child(-n+6):nth-child(10n+1)) {
  border: 1px solid red;
}

<div class="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 class="item">15</div>
  <div class="item">16</div>
</div>