html - 尽管(我认为)格式正确，但网格 CSS 不会验证

Question

我的 css 不会验证我的网格，我不知道为什么。据我所知，我的格式正确，但我的两个网格规则的 W3C CSS 验证器上一直被告知“值太多或无法识别”。这是第一个容器的代码:

.wrapper {
display: grid;
grid: 1fr 3fr;
grid-gap: 1em;
grid-template-areas: "header header"
                     "nav nav"
                     "side1 main"
                     "side2 main"
                     "footer footer";
}

这是媒体查询中第二个容器的代码:

.wrapper {
    display: grid;
    grid: 100px 1fr 3fr;
    grid-gap: 1em;
    grid-template-areas: "header header header"
                         "nav side1 main"
                         "nav side2 main"
                         "footer footer footer";
}

感谢任何和所有帮助，令人沮丧的是我无法弄清楚，我相信这是一个简单的解决方案。

Answer 1

你的 grid 的语法是错的。尝试类似的东西:

grid: auto / 1fr 3fr;

意思是

grid: grid-template-rows / grid-template-columns

另一个也一样:

grid: auto / 100px 1fr 3fr;

语法有点棘手，您可以在规范中找到详细信息: https://drafts.csswg.org/css-grid/#grid-shorthand

<'grid-template'> | 
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | 
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

|是一个 Or，在你的情况下，我们使用了 <'grid-template'>它的语法是:

 none | 
 [ <'grid-template-rows'> / <'grid-template-columns'> ] | 
 [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

你也可以这样做

grid: auto-flow / 1fr 3fr;

然后您使用 [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>