使任意数量的列自动填充和"自动填充"网格的宽度在Chrome中

Question

我需要自动填充列，从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的宽度?

Answer 1

你差一点就成功了。不是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>

Answer 2

我通常这样使用:

display: grid;
grid-template-columns: auto auto auto auto;

Chrome不支持grid-template-columns，所以你可能有一个语法错误。把你的代码贴出来，我可能会帮你更多的忙。