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属性的“无效属性值”错误。

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

- Ic3m4n

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 属性

- Michael Benjamin

Answer 2

minmax() CSS 函数定义了一个大于或等于 min、小于或等于 max 的尺寸范围。

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

- iamnonso