更改行数时更改 CSS 网格列

发布于03月06日

我有一个有三个单元格的网格容器.我已经将此CSS应用于容器:

margin: 0 auto;
display: grid;
gap: 0;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
justify-items: stretch;
align-items: stretch;

当屏幕宽度变小时，第三个单元格转到第二行.但我希望单元格延伸到整个宽度，如图所示:

这有没有可能呢？

推荐答案

You can do such a thing with flex-box:
html

<body>
  <div style="background-color: blue;"></div>
  <div style="background-color: green;"></div>
  <div style="background-color: red;"></div>
</body>

政务司司长

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  flex-basis: 280px;
  height: 280px;
  flex-grow: 1;
}

Flex容器上的flex-wrap: wrap;将允许在项目不适合屏幕时对其进行包装. 在弹性项上的flex-grow: 1;将确保项增长到适合可用宽度.

Css相关问答推荐

无法瞄准元素

如何在悬停时缓慢更改渐变 colored颜色？

如何在Angular material 选项卡中设置自定义圆角下划线的样式

在css网格中用一个锚标签(顶部/底部边距)包装图像？

可以在 JavaFX CSS 中同时使用 dropshadow 和 insideshadow 吗？

在R shiny中 Select DT表格值的背景 colored颜色 (无条件的自由 Select )

使用框架时样式冲突导致的 CSS 网格布局问题

我怎样才能将我的按钮向上移动，因为文本是

antd 中的子菜单项不可滚动

Sass @use 排序

在 css 中使用 first-of-type 效果太好了吗？

为什么 flexbox 中的在应用居中时不会调整大小？

为什么过渡属性不适用于 box-shadow？

为什么标题中的特定 div 与 Odoo 13 中 PDF 中的页面重叠？

如何强制 div 出现在下方而不是旁边？

在 IE9-10 中压缩 SVG 的背景大小

媒体查询以错误的宽度触发

在 Vuejs 中拥有全局 CSS 的最佳方式

如何对齐标签和文本区域？

我可以在 css 中指定 maxlength 吗？

实用课程推荐