gpt4 book ai didi

css - 嵌套的 CSS 网格

转载 作者:行者123 更新时间:2023-11-28 17:06:24 30 4
gpt4 key购买 nike

我目前正在研究 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>

图片: enter image description here

最佳答案

你可以像这样简单地使用

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 - 嵌套的 CSS 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49252321/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com