Столбцы и строки сетки не могут быть правильно выровнены - PullRequest
Новая
       22

Столбцы и строки сетки не могут быть правильно выровнены

0 голосов
/ 27 февраля 2019

Я новичок в CSS, и я пытался создать довольно простой макет с помощью сетки CSS.

Я нарисовал эскиз:

enter image description here

Так что после прочтения Отличного объяснения в css-tricks я начал писать код, но по какой-то причине строки не выложены правильно, как я ожидал (мой код на codepen ). 

grid-template-rows: 5em 50vh 100vh 30vh;
grid-template-columns: 0.15% 0.3% 0.4 0.15%;

grid-template-areas: "logo search-bar menu . "
                        "description description description nav-bar"
                        "main main main . "
                        "footer footer footer footer";

Может кто-нибудь объяснить и помочь мне, как это сделать правильно?

Заранее всем спасибо за помощь.

1 Ответ

0 голосов
/ 27 февраля 2019

Во-первых , вам не хватает единицы в процентах в значении столбца: 

grid-template-columns: 0.15% 0.3% 0.4 0.15%

Это делает недействительным все правило.

Второе , grid-area значения свойств не используют кавычки .

Недопустимо: grid-area: "logo".

Это просто grid-area: logo.

В-третьих , ваши навигационные ссылки неуместны, потому что у вас есть несоответствие HTML-CSS: 

<nav class="navigation-icon-links">navigation-links</nav>

.navigation-links {
    grid-area: nav-bar;
    background:orange;
}

пересмотренный кодекс

...