CSS网格项不是根据grid-area属性排序的

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

我有这个简单的网格

.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;但我想在我的代码库中使用统一的代码样式。

css css3 css-grid
1个回答
5
投票

我看到两件固定的东西让它对我有用:

  1. 您不应该为内部ID /类使用引号: #header { grid-area: hd; }
  2. 您在网格模板区域键的顶行中错过了一个高清(它表示h而不是hd)。
© www.soinside.com 2019 - 2024. All rights reserved.