使用repeat()和自动调整/自动填充功能,当列或行具有定义的长度模式时,很容易获取网格项.
在下面的示例中,所有列的最小宽度为100px,最大宽度为1fr.
#grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}
<div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
但是当轨道没有长度模式(即长度随机变化)时,网格物品如何包裹？
在下面的示例中,第一列的宽度为60％.第二列是最小/最大250px / 1fr.如何让第二列包装在较小的屏幕上？
#grid {
display: grid;
grid-template-columns: 60% minmax(250px,1fr);
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}
<div id="grid"> <div></div> <div></div> </div>
我知道flexBox和媒体查询提供了解决方案,但我想知道Grid Layout是否可以做到这一点.我搜索了spec,但没有找到任何东西.也许我错过了这个部分.谢谢你的帮助.
解决方法
网格项实际上不会换行.您看到网格项“包装”到下一行的原因实际上是因为显式网格被更改以保持在minmax()规定的约束范围内. repeat()生成的列数与网格容器的使用宽度成比例,网格项根据列数逐个布局,并根据需要创建新行.
因此,当有两列时,无法强制第二个网格项进行换行,并且显式网格中有空间将该网格项插入第二列.此外,即使您可以告诉第二个网格项“换行”,也意味着将它放在第一列的新行中,因此它的布局将由第一列而不是第二列控制.当然,根据第二列的大小仍将完全打破网格布局.
如果打算通过将元素包装到新行来适应较小的屏幕,则应使用flex布局,而不是网格布局.网格布局不适用于此目的.
