为什么我的HTML结构不能与CSS Grid布局一起使用？

I am trying to understand how HTML structure affects the CSS Grid Layout Module spec. I'm using Chrome Canary with experimental features enabled.

我试图了解HTML结构如何影响CSS网格布局模块规范。我正在使用启用了实验性功能的Chrome Canary。

The attached code works as expected, but placing the nav and search inside the header tag just for semantics throws off the CSS grid placement.

附加的代码按预期工作，但将导航和搜索放在头标记内仅用于语义会抛出CSS网格放置。

What am I missing to be able to use the CSS grid module and still keep my semantic header with nav, brand, and search wrapped in my header tag?

我缺少什么能够使用CSS网格模块并仍然保留我的标题标签包含导航，品牌和搜索的语义标题？

html {
  box-sizing: border-box;
  min-height: 2000px;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 20% auto 20%;
  grid-template-rows: 50px auto 50px;
  background-color: #fff;
  color: #444;
}
.mainheader {
  grid-column: 1 / span 3;
  grid-row: 1;
  background: #39444C;
}
.brand {
  height: 100%;
  margin: auto;
  color: #FFFFFF;
  background: #2E3840;
}
.search {
  grid-column: 3;
  grid-row: 1;
}
.navbar {
  grid-column: 2;
  grid-row: 1;
  background: #39444C;
}
ul {
  padding: 12px;
  margin: 0;
}
.navbar li {
  display: inline;
  padding: 10px;
}
.navbar li a {
  color: #9CA19A;
  text-decoration: none;
  font-size: 1.1rem;
}
.navbar a:hover {
  color: #00A5D5;
}
.sidenav {
  grid-column: 1;
  grid-row: 2;
  background: #F2F2F2;
}
.content {
  grid-column: 2;
  grid-row: 2;
  background: yellow;
}
.mainfooter {
  background: gray;
  grid-column: 1 / span 2;
  grid-row: 3;
}
.mainheader h1 {
  font-size: 2.8vw;
}

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="wrapper">

    <header class="mainheader">
      <h1 class="brand">Simply Expense</h1>
    </header>
    <nav class="navbar">
      <ul>
        <li><a href="#">Expenses</a>
        </li>
        <li><a href="#">Receipts</a>
        </li>
        <li><a href="#">Reports</a>
        </li>
      </ul>
    </nav>
    <div class="search">
      <button>test</button>
      <input type="text">
    </div>
    <aside class="sidenav">
      Side nav
    </aside>

    <div class="content">
      <button>test</button>
      <button>test</button>
      <button>test</button>
    </div>

    <footer class="mainfooter">
      Footer
    </footer>
  </div>

</body>

</html>

1 个解决方案

#1

Figured it out, if you place the brand, nav, and search inside the header they are no longer a direct descendant of the grid, so to place them correctly, you need to make another grid/subgrid when the subgrid keyword is available. For now, you can just use display:grid with same dimensions

弄清楚，如果你在标题中放置品牌，导航和搜索它们不再是网格的直接后代，那么要正确放置它们，你需要在subgrid关键字可用时创建另一个网格/子网格。现在，您可以使用具有相同尺寸的display：grid

Given this HTML:

鉴于此HTML：

<div class="wrapper">
<div class="header">
    <h1 class="logo">Simply Expense</h1>
    <nav class="navbar">
        <ul>
            <li><a href="#">Expenses</a></li>
            <li><a href="#">Receipts</a></li>
            <li><a href="#">Reports</a></li>
        </ul>
    </nav>
    <div class="search">
        <button>test</button>
        <input type="text">
    </div>
</div>
</div>

the CSS would be:

CSS将是：

.wrapper {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 50px auto 50px;
} 
.header {
    grid-column: 1 /span 3;
    grid-row: 1 ;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 50px;
}
.logo {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: #FFFFFF;
    background: #2E3840;
}
.search{
    grid-column: 3;
    grid-row: 1;
    background: #2E3840;
}

Demo:

演示：

html {
  box-sizing: border-box;
  min-height: 2000px;
}

*, *:before, *:after {
  box-sizing: inherit;
}
body{
  margin: 10px;
  padding: 0;
}
.header{
  grid-column: 1 /span 3;
  grid-row: 1 ;
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 50px;
}
.wrapper {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 50px auto 50px;
}


.logo {
  grid-column: 1;
  grid-row: 1 ;
  margin: 0;
  color: #FFFFFF;
  background: #2E3840;
}
.search{
  grid-column: 3;
  grid-row: 1;
  background: #2E3840;
}
.navbar {
  grid-column: 2;
  grid-row: 1;
  background: #39444C;
}

.sidenav {
  grid-column: 1;
  grid-row: 2;
  background: #F2F2F2;
}

.content {
  grid-column: 2/span 2;
  grid-row: 2;
  background: yellow;
}

.mainfooter {
  background: gray;
  grid-column: 1 / span 3 ;
  grid-row: 3;
}

.mainheader h1 {
  font-size: 2.8vw;
}

ul {
  padding: 12px;
  margin: 0; }

.navbar li {
  display: inline;
  padding: 10px; }

.navbar li a {
  color: #9CA19A;
  text-decoration: none;
  font-size: 1.1rem; }

.navbar a:hover {
  color: #00A5D5; }

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <h1 class="logo">Simply Expense</h1>
        <nav class="navbar">
            <ul>
                <li><a href="#">Expenses</a></li>
                <li><a href="#">Receipts</a></li>
                <li><a href="#">Reports</a></li>
            </ul>
        </nav>
        <div class="search">
            <button>test</button>
            <input type="text">
        </div>
    </div>
</div>

</body>
</html>

#1