嵌套 CSS 网格

Question

我目前正在研究 CSS 网格布局，我希望容器中的两个 div 每个宽度为 50%。但是我真的想不通。

元素 nav 内部有两个 div，我希望每个 div 占 50%，但使用网格语法。你会怎么做？

代码：

$gutter: 30px;
$columns: 12;
$maxwidth: 1200px;

#container {
    max-width: $maxwidth;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat($columns, 1fr);
    grid-column-gap: $gutter;
    grid-template-areas: "nav" "header" "main" "footer";
}

   header, nav, main, footer {
       grid-column: span $columns;
   }

标记：

<div id="container">
    <nav>
        <div></div>
        <div></div>
    </nav
    <header></header>
    <main></main>
    <footer></footer>
</div>

图片：

Answer 1

nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

Answer 2

你可以像这样简单地使用

nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

nav div {
  background: red;
  height: 250px;
}

nav div + div {
  background: green; 
}

<div id="container">
    <nav>
        <div></div>
        <div></div>
    </nav>
    <header></header>
    <main></main>
    <footer></footer>
</div>

了解更多GRID

嵌套 CSS 网格

Nested CSS grid

css

css-grid