使任意数量的列自动填充和“自动填充”铬中网格的宽度
使任意数量的列自动填充和“自动填充”铬中网格的宽度
提问于 2021-08-19 19:31:32
我需要自动填充列，任何从2到4的数字。我需要总列宽度来填充2，3或4个可能的列的网格宽度。
但是，当我尝试在SO解决方案和教程页面(如CSS技巧页面 )中看到的代码时，它们描述了如下所示的自动填充：
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));但是当我用Chrome做的时候，上面写着invalid property value。
HTML类似于：
<div class="my-grid">
<div class="some-column"></div>
<div class="some-column"></div>
<div class="some-column"></div>
</div>如何使任意数量的列在Chrome中自动填充和填充网格的宽度？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-19 20:49:09
你差点就到了。您需要的不是auto-fill，而是auto-fit。
不过，请注意，这不会将列数限制为4列，它将创建符合允许宽度所需的列数。
.my-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
margin-bottom: 1em;
;
}
.some-column {
height: 50px;
border: 1px solid red;
}<div class="my-grid">
<div class="some-column"></div>
<div class="some-column"></div>
<div class="some-column"></div>
</div>
<div class="my-grid">
<div class="some-column"></div>
<div class="some-column"></div>
</div>
<div class="my-grid">
<div class="some-column"></div>
<div class="some-column"></div>
<div class="some-column"></div>
<div class="some-column"></div>
</div>
Stack Overflow用户
发布于 2021-08-19 20:01:40
我通常使用这个：
display: grid;
grid-template-columns: auto auto auto auto;Chrome确实支持网格模板列，所以您可能有语法错误。发布您的代码，我可能会提供更多帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68853616
复制相关文章
相似问题
腾讯云开发者
