嵌套的CSS网格

Question

我目前正在开发CSS网格布局，我希望容器中的两个div各占50％宽度。但我真的不知道如何。

元素nav里面有两个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: 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

的更多信息

Answer 2

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