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

user_14550927 0
Viewed 212

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.

css-grid css html
1 Answers

Your syntax of grid is wrong. Try somthing like:

grid: auto / 1fr 3fr;

which means

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

enter image description here

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'>

enter image description here

user_86203330
Related