网格列和行无法正确对齐

Question

我是CSS的新手，我一直在尝试使用CSS网格构建一个非常简单的布局。

我画了一个草图：

因此，在阅读css-tricks中的很好的解释之后，我开始编写代码，但是由于某些原因，行没有按我期望的那样正确放置（我在{{3 }}。

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

有人可以解释并帮助我正确进行吗？

谢谢大家， 寻求帮助。

Answer 1

首先，您在列值中缺少百分比单位：

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

这会使整个规则无效。

第二，grid-area property values don't use quotes。

这是无效的：grid-area: "logo"。

它只是grid-area: logo。

第三，由于您的HTML-CSS不匹配，导航链接不正确：

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

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

revised codepen