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

我看到两点可以解决的问题：

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

string qry= "select p.*,u.fname as username from Proforma p inner join users u on u.userid=p.userid where " + where1 + " and " + where2 + " and " + where3 + " order by p.userid,invoicedate desc";
在网格模板区域键的第一行中错过了一个hd（用h代替hd）。

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

1 个答案: