我需要做出响应性的网格布局,其中最后一行可能有较少的元素在奇数个元素的情况下,但无论如何它需要在全宽上拉伸.元素将被添加到管理中,所以我们只有元素的数量和一些条件在css/js的空间.我该怎么做呢?

我试过自动调整,但我不知道如何把它平分成等行

Here is an example of how I want it: Example of how I want

推荐答案

使用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>

Css相关问答推荐

当鼠标悬停在元素的::第一行时,如何应用样式?

如何在JavaFX中设置分隔符的样式?

不了解重复-线性-渐变 colored颜色 停止

SVG文本在移动浏览器上增长并溢出

你能混合固定/相对定位吗?

仅 Select 嵌套 div 的底部,而不知道它们的嵌套程度

当弯曲方向设置为列时如何制作等高卡片?

CSS 网格 - 具有独立可滚动区域的两列布局

在 React 中使用 CSS 动画 onClick()

通过 CSS 中的媒体查询更改站点的页面大小

使用 React 和 Flexbox 文本溢出框外

当父元素处于子元素 input 的焦点状态时更改父元素的样式

普通流,流布局,块和内联布局有什么区别?

CSS类和id同名

Flexbox 列自底对齐

在 CSS 中表示 100% 的 1/3 的最佳方式是什么?

如何让 flexbox 在计算中包含填充?

CSS(webkit):在绝对定位元素上用底部覆盖顶部

CSS:仅表格列之间的边框

Twitter Bootstrap 多级下拉菜单