相关疑难解决方法(0)
自动填充和自动装配有什么区别？
我正在使用CSS网格来实现卡网格布局.
但我不太知道如何调整minmax()语句来处理没有足够的项目来填充行但仍然需要它们看起来像卡片的用例!
如果我用静态100px替换最大1fr值或使用小数0.25fr,它会在较小的介质尺寸下扰乱缩放.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 17px;
grid-row-gap: 25.5px;
padding-bottom: 25.5px;
}
.card {
background-color: #000;
height: 100px;
}<div class="wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>然后,如果只有几个项目
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 17px;
grid-row-gap: 25.5px;
padding-bottom: 25.5px;
}
.card {
background-color: #000;
height: 100px;
}<div class="wrapper">
<div class="card"></div>
<div class="card"></div>
</div>10
推荐指数
推荐指数
1
解决办法
解决办法
2098
查看次数
查看次数
为什么 auto-fit 或 auto-fill 不能在 minmax 下正常工作？
当我添加 auto-fit 或 auto-fill 而不是数字时，它无法正常工作。
grid-template-columns: repeat(auto-fit, minmax(max-content, max-content));
但是当我添加数字而不是最大内容时它可以正常工作。
grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
但我希望网格的大小与内容的大小相同（适合）。像这样：
grid-template-columns: repeat(30, minmax(max-content, max-content));
（使用自动调整或自动填充）。我怎样才能做到这一点？
grid-template-columns: repeat(auto-fit, minmax(max-content, max-content));
grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
6
推荐指数
推荐指数
3
解决办法
解决办法
7008
查看次数
查看次数
minmax失败(无效的属性值)
Chrome提供invalid property value并且不尊重CSS:
grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
auto用min-contentand 替换时也会失败max-content.
当auto被固定值替换时,它按预期工作,例如
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
这是令人惊讶的,因为这两个repeat和minmax支持的关键字.
HTML很简单
<div class='wrapper>
<div>...</div>
<div>...</div>
</div>
和css
.wrapper {
display: grid
grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
}
5
推荐指数
推荐指数
1
解决办法
解决办法
1024
查看次数
查看次数