gpt4 book ai didi

css - 如何指定 repeat() 将使用自动调整/填充创建的最大列数?

转载 作者:技术小花猫 更新时间:2023-10-29 11:22:03 31 4
gpt4 key购买 nike

<分区>

有没有办法不使用媒体查询来限制创建的列数,并将其与自动调整/填充相结合?

例如:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

创建一个美妙的响应式布局。但想象一下设计最多需要 3 列——即使在宽浏览器中也是如此。如果空间允许,它会很乐意显示 4、5 列。

使用媒体查询,我可以指定大屏幕获取:

grid-template-columns: 1fr 1fr 1fr;

较小的屏幕会:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

但这感觉不对。有没有办法告诉我的网格布局最多重复 n 次,并且仍然使用重复和自动调整/填充?

更新:这不是以下内容的副本:How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?

我想问的是如何使视口(viewport)代码也适用于较小的视口(viewport)。上面提到的问题(和答案)只涉及我问题的起点。

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com