CSS minmax 无效属性值

Question

我想minmax为我的grid-template-columns. 但由于某种原因我无法让它发挥作用。

这是我的代码：

.start {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    grid-template-rows: auto;
    grid-gap: 2%;
}

<div class="start">
  <div class="news"></div>
  <div class="video"></div>
</div>

当我在 Chrome 中检查该类时.start，它只是显示该minmax属性的“属性值无效”。

我只想要一个两列布局，当视口变窄时，它会变成一列布局。

Answer 1

我想这就是你所追求的：

grid-template-columns: repeat(2, minmax(320px, 1fr));

对于较小的屏幕，您需要一列，请使用媒体查询来运行：

grid-template-columns: 1fr;

正确的语法minmax()详见下图（取自规范）。

请注意，曲目列表中没有“minmax()后接另一个”的选项。minmax()这就是为什么你的规则无效。

这是完整的解释：

• 7.2. 显式轨道大小调整：grid-template-rows和grid-template-columns属性