我是CSS的新手,我一直在尝试使用CSS网格构建一个非常简单的布局。
我画了一幅草图:
所以在阅读了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";
有人可以解释并协助我如何正确地做到这一点?
提前谢谢大家的帮助。
首先,您在列值中缺少百分比单位:
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;
}