当前位置: 首页 > 知识库问答 >
问题:

使用repeat()和auto-fit&minmax:1fr是否有最大宽度?

吕鹏
2023-03-14

我正在使用声明grid-template-columns:repeat(auto-fit,minmax(300px,1fr));它的工作原理和预期的一样,但我想有一个最大宽度为1fr-有没有一种方法来限制由1fr产生的宽度,比方说,450px?

我知道有min()、max()和clamp(),但对它们的支持似乎还没有那么好。

共有1个答案

夹谷沛
2023-03-14

不幸的是,在repeat()函数(当前)中不允许使用min()max()clamp(),唯一的选择是使用诸如.grid>*这样的全局选择器将max-width设置为直接子级。但请注意,您将必须处理单元格的对齐。

 类似资料:
  • 问题内容: 使用CSS媒体查询,您可以用于定位设备宽度(例如iPhone或Android设备)和/或定位页面宽度的。 如果使用,则在更改桌面上浏览器窗口的大小时,CSS不会更改,因为您的桌面不会更改大小。 如果使用,则在更改桌面上浏览器窗口的大小时,可能会显示面向移动的样式,例如触摸友好的元素和菜单等。 现在已不再针对特定的浏览器(和设备?)定位,并且您应该对目标对象有所了解。那也适用于媒体查询吗

  • AutoFitText This plugin is based on the Nativescript Label implementation but with changes to adjust the font size according of the label's width Prerequisites / Requirements This plugin is only teste

  • 问题内容: 我有这个设置: HTML : CSS : 通过此设置,它可以在iPhone上运行,但不能在浏览器中运行。 是因为我已经在meta中,也许已经在? 问题答案: 我发现最好的方法是为较旧的浏览器编写默认CSS,因为较旧的浏览器包括5.5、6、7和8。无法读取@media。当我使用@media时,我会这样使用: 但是,您可以使用@media进行任何操作,这只是为所有浏览器构建样式时最适合我的

  • 问题内容: 所以我有这个网格: 里面有没有空格的超长字符串。s是具有固定尺寸的占位符。这将产生以上结果: 但是更改为: 它溢出其父级,超出屏幕大小。为什么它的行为不像minmax? 问题答案: 因为默认情况下与等效。 使用时,这与standalone有所不同 。 在第一种情况下,轨道不能小于网格项目的大小( 最小 大小为)。 在第二种情况下,轨道可以自由调整为0的宽度/高度。

  • 所以我有了这个网格: 在中有一个没有空格的超长字符串。是具有固定尺寸的占位符。这就产生了上述结果: 但将更改为会得到以下结果: 它会溢出其父级和屏幕大小。为什么它的行为不像Minmax? 码本

  • 问题内容: 我需要为iPhone / Android手机开发一些html页面,但是和之间有什么区别?我需要为不同的屏幕尺寸使用不同的CSS。 有什么不同? 问题答案: 是目标显示区域的宽度,例如浏览器 是设备整个渲染区域的宽度,即实际设备屏幕 这同样适用于和自然。