假设我有以下代码。根据我的理解，此网格内的列永远不会小于150像素宽……也不会超过容器宽度的“ 1分数”。
然后，网格如何决定创建更多列？按照这种逻辑，您是否不总是会得到一个包含一列的网格，该列占据了容器宽度的100％？
main {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.item {
background: #07c;
height: 150px;
}<main>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</main>按照这种逻辑，您是否不总是会得到一个包含一列的网格，该列占据了容器宽度的100％？
不可以，因为当最大约束用表示时，网格将特别不尝试这样做fr。取而代之的是，网格将尝试创建满足网格容器宽度允许的最少150个像素限制的尽可能多的列。例如-暂时保留指定的装订线宽度-如果网格容器的宽度为300像素，则将创建两个150像素的列。如果宽度达到450像素，则将添加第三列。
所述1FR意味着任何剩余空间（当电网容器是宽之间的任何位置300点450的像素非包含）的列中平均分配，后各列已敷设。
这是在所有规定的规范的部分7.2.2.2。文本相当冗长，但是它描述的示例在功能上与您拥有的示例相同：
例如，以下代码将创建适合窗口宽度的多达25个字符的列。如果有剩余空间，它将分配给25个字符的列。
body { display: grid; grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr)); }
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句