html - CSS minmax 无效的属性值

Question

我想为我的 grid-template-columns 设置 minmax 属性。但出于某种原因，我没有让它工作。

这是我的代码:

.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 属性显示“无效的属性值”。

我只想要一个两列布局，当视口(viewport)变窄时变成一个单列布局。

Answer 1

我认为这就是您所追求的:

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

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

grid-template-columns: 1fr;

---

minmax() 符号需要正确的语法。

大多数 CSS 属性都可以这样说，除了在这种情况下，由于有许多选项和变体，语法有点复杂并且不太容易理解。换句话说，创建无效规则相对容易。

minmax() 的正确语法详见下表 (taken from the spec)。

请注意，轨道列表中没有 minmax() 后跟另一个 minmax() 的选项。这就是您的规则无效的原因。

这里是完整的解释:

• 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties