我有一个包含三个单元格的网格容器，我在容器中应用了以下CSS：
margin: 0 auto; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-items: stretch; align-items: stretch;
当屏幕宽度变小时，第三个单元格将移到第二行，但我希望该单元格扩展到整个宽度，如下图所示：
有可能吗？
wnavrhmk1#
您可以使用flex-box执行以下操作：超文本标记语言
<body> <div style="background-color: blue;"></div> <div style="background-color: green;"></div> <div style="background-color: red;"></div> </body>
CSS
body { display: flex; flex-wrap: wrap; } div { flex-basis: 280px; height: 280px; flex-grow: 1; }
flex-wrap: wrap;在flex容器上将允许项目在屏幕不适合时换行。flex-grow: 1;在flex项目上将确保项目增长以适合可用宽度。
flex-wrap: wrap;
flex-grow: 1;
1条答案
按热度按时间wnavrhmk1#
您可以使用flex-box执行以下操作：
超文本标记语言
CSS
flex-wrap: wrap;在flex容器上将允许项目在屏幕不适合时换行。flex-grow: 1;在flex项目上将确保项目增长以适合可用宽度。