网格列和行无法正确对齐

问题描述 投票:0回答:1

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

有人可以解释并协助我如何正确地做到这一点?

提前谢谢大家的帮助。

html css css3 grid css-grid
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.