仅 CSS 网格列，不换行，并具有自动填充覆盖端间隙

Question

您好，我想在列中显示随机数量的文章，但不换行，但在末尾填充额外的空间。

文章必须每隔 4 个显示整个可用宽度，然后通过水平滚动您可以移动到下一个 4 个，依此类推。 如果少于 4 个或任何倍数，我希望将剩余部分填空。

所以我的尝试是这样的：

section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  grid-auto-flow: column;
  overflow:scroll;
 }
 
 article {
 background-color: lightblue;
 margin: 10px;
 white-space: nowrap;
 height: 40px;
 }

<section>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <article>Article 4</article>
  <article>Article 5</article>
  <article>Article 6</article>
</section>

如您所见，前 4 列已正确渲染，溢出的列不再占用 25% 的空间（以适应 1/4），并且在最后 2 列之后没有填充额外的空间。（在这种情况下，应该还有2个白色）

我可以用 CSS Grid 做些什么来实现这一点吗？ 请记住，可用的总空间以及文章数量都是动态的。理想情况下，我希望 Grid 始终呈现覆盖间隙的 4 列的倍数。

Answer 1

使用grid-auto-columns: 25%，然后在每个组的第一个元素上考虑一个伪元素来创建额外的空间：

section {
  display: grid;
  grid-auto-columns: calc((100% - 3*10px)/4); /* we remove 3 gaps here */
  grid-gap: 10px;
  grid-auto-flow: column;
  overflow: auto;
}

article {
  background-color: lightblue;
  white-space: nowrap;
  margin:10px 0;
  height: 40px;
  position:relative;
}

article:nth-child(4n + 1)::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:1px; /* a small height */
  width:calc(400% + 3*10px); /* we consider 3 gaps here */
  pointer-events: none; /* avoid any interaction */
}

<section>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <article>Article 4</article>
  <article>Article 5</article>
  <article>Article 6</article>
</section>

<section>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <article>Article 4</article>
  <article>Article 5</article>
  <article>Article 6</article>
  <article>Article 7</article>
  <article>Article 8</article>
</section>

<section>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
</section>