我的网格中有3列。
我希望他们表现得像这样:
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
如以下代码段所示:https://codepen.io/chriscoyier/pen/xBmYJN
除了我希望它每行只有3列,最后一列是3fr(其他2列大小的3倍),即"1fr 1fr 3fr"。我希望最后一列在达到最小宽度时自动转到新行。
在使用上面的例子时,当列不适合时,它们会自动折叠成新的一行。在我的例子中,有没有方法可以做到这一点?不用手动配置网格模板区域并根据@media screen width调整它们?
我假设该功能来自repeat()的自动填充参数...
第一次
1条答案
按热度按时间zysjyyx41#
这确实是可能的。诀窍是将第三列分配为跨越3列,而将
grid-template-column
保留为auto-fill
或auto-fit
。此外,通过使用
auto-fit
,列将调整得更好,因为它们适合可用空间。第一个
Codepen