css - 嵌套的 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