Grid CSS won't validate despite proper (I think) formatting

Question

My css won't validate for my grid and I'm not sure why. As far as I'm aware, I'm formatting properly, but I keep getting told "Too many values or are not recognized" on the W3C CSS validator for both of my grid rules. Here's the code for the first container:

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

And here's the code for the second container, inside a media query:

.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";
}

Any and all help is appreciated, it's rather frustrating that I can't figure it out, and I'm sure it's a simple solution.

Answer 1

Your syntax of grid is wrong. Try somthing like:

grid: auto / 1fr 3fr;

which means

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

Same for the other one:

grid: auto / 100px 1fr 3fr;

The syntax is a bit tricky, you can find the detail in the specification: 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'>

The | is an Or and in your case we used the <'grid-template'> and its syntax is:

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

You can also do

grid: auto-flow / 1fr 3fr;

and you use the [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>