CSS网格项未根据grid-area属性排序

Question

我有这个简单的网格

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

Answer 1

我看到两点修复后对我有用的东西：

1. 内部ID /类不应使用引号：

   #header { grid-area: hd; }

2. 您在网格模板区域键的第一行中错过了一个hd（用h代替hd）。