移动设备上的CSS网格全宽列

问题描述 投票:0回答:1

我使用 CSS 网格显示 2 列(50% 灰色/50% 黑色)。你看看它的样子

我想在移动设备上将它们设置为全宽,这样灰色将在第一行,黑色将在第二行。

我的CSS:

.container {
display:grid;
height:100vh;
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr))
}

我做错了什么?

附注我知道所有事情都可以通过 @media 查询完成,但我需要更现代的方式。

css css-grid
1个回答
0
投票

您的问题可以按照您的要求在没有媒体查询的情况下得到解决,您只需使用“flex”而不是“grid”即可。

这里有一个例子:

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-container .flex-item {
    flex:max(500px, 100% / 3);
}

通过此代码,我们指定将其部署为“flex”类型,然后我们确定它可以是带有“wrap”的多行容器。

容器内具有'flex:max(500px, 100% / 3)'属性的元素将被分割显示,除非flex容器内元素的宽度小于500px。

我希望这对您有帮助。 祝一切顺利

© www.soinside.com 2019 - 2024. All rights reserved.