如何让列的大小响应元素的数量？

Question

我需要制作响应式网格布局，在元素数量为奇数的情况下，最后一行的元素可能较少，但无论如何都需要在整个宽度上拉伸。元素将在 admin 中添加，因此我们在 css/js 中只有一些元素和空间用于某些条件。我该怎么做？

我试过自动调整，但我不知道如何将它分成等行

这是我想要的示例：

Answer 1

使用

flex

代替

grid

：

.container {
   display: flex;
   gap: 5px;
   flex-wrap:wrap;
}

.container > * {
  flex: 1 15%;
  background: red;
  height: 25px;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>