css 仅网格列，无换行且自动填充覆盖端部间隙

Question

你好，所以我想在不换行的情况下在列中显示随机数量的文章，但在末尾填充额外的 space。

文章必须每 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 列已正确呈现，溢出的列不再占用 space 的 25%（适合 1/4）并且没有额外的 spaces在最后2个之后填充。（在这种情况下，应该还有2个白色）

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

Answer 1

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

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>

css 仅网格列，无换行且自动填充覆盖端部间隙

css grid only columns, no wrap and with auto-fill covering end gap

html

css

multiple-columns

css-grid