Блог

Мой css не будет проверяться для моей сетки, и я не уверен, почему. Насколько мне известно, я правильно форматирую, но мне постоянно говорят «Слишком много значений или они не распознаются» в W3C CSS validator для обоих моих правил сетки. Вот код для первого контейнера:

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

Любая помощь приветствуется, это довольно неприятно, что я не могу в этом разобраться, и я уверен, что это простое решение.

Ваш синтаксис 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 amp;amp; dense? ] <'grid-auto-columns'>? | 
[ auto-flow amp;amp; dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
 

Это | Или, и в вашем случае мы использовали <'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 amp;amp; dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>