使任意数量的列自动填充并“自动填充”Chrome 中的网格宽度

Question

我需要自动填充列，从 2 到 4 中的任意数字。我需要总列宽来填充 2、3 或 4 可能列的网格宽度。

但是当我尝试代码时，我在 SO 解决方案和教程页面中看到 a CSS Tricks page，他们描述了这样的自动填充：

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

我通常使用这个：

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

Chrome 确实支持 grid-template-columns，因此您可能有语法错误。 Post 你的代码和我可能会提供更多帮助。

Answer 2

你快到了。而不是 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>

使任意数量的列自动填充并“自动填充”Chrome 中的网格宽度

Make any number of columns automatically populate and `auto-fill` the width of grid in Chrome

html

css

css-grid