我有这个简单的网格
.wrapper {
display: grid;
grid-template: repeat(6, 1fr) / repeat(12, 1fr);
grid-template-areas:
"hd hd hd hd hd hd hd hd hd hd hd hd"
"nav nav nav nav nav nav nav nav nav nav nav nav"
"mn mn mn mn mn mn mn mn mn mn mn mn"
"sb sb sb sb sb sb sb sb sb sb sb sb"
"adv adv adv adv adv adv adv adv adv adv adv adv"
"ft ft ft ft ft ft ft ft ft ft ft ft";
gap: 1em;
}
#header {
grid-area: "hd";
}
#nav {
grid-area: "nav";
}
#main {
grid-area: "mn";
}
#aside {
grid-area: "sb";
}
#adv {
grid-area: "adv";
}
#footer {
grid-area: "ft";
}
.wrapper > * {
font-family: 'Open Sans';
background: #444;
color: #fff;
padding: 1em;
}
<div class="wrapper">
<header id="header">Header</header>
<nav id="nav">Nav</nav>
<aside id="aside">Sidebar</aside>
<main id="main">Main</main>
<div id="adv">advertising</div>
<footer id="footer">Footer</footer>
</div>
我正在尝试使用网格区域表示法使每个元素占据整行,但它显示同一行中的所有项目
我知道我可以使用grid-column: span 12;
但我想在我的代码库中使用统一的代码样式。
我看到两件固定的东西让它对我有用:
#header {
grid-area: hd;
}