CSS minmax 无效 属性 值
CSS minmax invalid property value
我想为我的 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
class 时,它只是为 minmax
属性显示 "invalid property value"。
我只想要一个两栏布局,当视口变窄时变成一栏布局。
我想这就是你想要的:
grid-template-columns: repeat(2, minmax(320px, 1fr));
对于较小的屏幕,您需要一栏,使用媒体查询 运行 这个:
grid-template-columns: 1fr;
minmax()
表示法需要正确的语法。
大多数 CSS 属性都可以这样说,但在这种情况下除外,由于有许多选项和变体,语法有点复杂并且不太容易理解。换句话说,创建无效规则相对容易。
minmax()
的正确语法详见下表 (taken from the spec)。
请注意,曲目列表中没有 minmax()
后跟另一个 minmax()
的选项。这就是您的规则无效的原因。
完整的解释如下:
minmax() CSS 函数定义了大于或等于最小值且小于或等于最大值的大小范围。
/* <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)
我想为我的 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
class 时,它只是为 minmax
属性显示 "invalid property value"。
我只想要一个两栏布局,当视口变窄时变成一栏布局。
我想这就是你想要的:
grid-template-columns: repeat(2, minmax(320px, 1fr));
对于较小的屏幕,您需要一栏,使用媒体查询 运行 这个:
grid-template-columns: 1fr;
minmax()
表示法需要正确的语法。
大多数 CSS 属性都可以这样说,但在这种情况下除外,由于有许多选项和变体,语法有点复杂并且不太容易理解。换句话说,创建无效规则相对容易。
minmax()
的正确语法详见下表 (taken from the spec)。
请注意,曲目列表中没有 minmax()
后跟另一个 minmax()
的选项。这就是您的规则无效的原因。
完整的解释如下:
minmax() CSS 函数定义了大于或等于最小值且小于或等于最大值的大小范围。
/* <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)