Grid columns and rows failing to align properly

问题

I'm new to CSS and i have been trying to construct a quite simple layout with CSS grid .

I drew a sketch:

So after reading the Great explanation in css-tricks, i started writing the code but for some reason the rows aren't laid correctly as i would expect (my code on 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";

Can someone please explain and assist me how to do it correctly?

Thank you all in advance, for the help.

回答1:

First, you're missing a percentage unit in a column value:

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

That invalidates the entire rule.

Second, grid-area property values don't use quotes.

This is invalid: grid-area: "logo".

It's just grid-area: logo.

Third, your navigation links are out of place because you have an HTML-CSS mismatch:

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

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

revised codepen

来源：https://stackoverflow.com/questions/54896160/grid-columns-and-rows-failing-to-align-properly