这里研究了一些问题，但它们并不能完全解决我正在寻找的问题。
假设我有一个网站并且我想要。在桌面上我想要这个：
这很容易。 grid-template-columns: 重复(3, 33%) (基本上)
但是，在移动设备上，我想要这个
我遇到的情况发生在它翻转到单个列之前：
我正在尝试 clamp()、minmax() 以及各种各样的东西，但没有任何东西能按我想要的方式工作。是的，我完全可以使用媒体查询，但我希望使用现代CSS（如clamp、grid、minmax等）创建真正流畅的网格/柔性布局，这样就不需要媒体查询来进行基本布局更改。< /p>
我知道这不起作用，但作为请求的起点，这是我 100 次尝试之一的简单版本:) 在这个版本中，我尝试使用钳位从重复（3）切换到重复（1） ）。
1
1152.wrapper {
display: grid;
gap: 15px;
grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
Example A
Example Two
Third Example
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
