我试图在CSS3网格中创建一个叠加层,但我似乎无法弄清楚如何实现它.我在网上搜索过但没有找到任何帮助.我希望实现如下所示:
body {
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
grid-template-rows: 1f;
width: 100vw;
height: 100vh;
grid-template-areas:
"a"
"b"
"c";
}
.box {
background-color: #444;
color: #fff;
}
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}Run Code Online (Sandbox Code Playgroud)
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>Run Code Online (Sandbox Code Playgroud)
这是一个指向codepen的链接:https://codepen.io/anon/pen/PROVeY
编辑:
如何在CSS3网格布局中将div和左侧和右侧的div叠加在它后面的较大div上

body {
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
grid-template-rows: 1f;
width: 100vw;
height: 100vh;
grid-template-areas: …Run Code Online (Sandbox Code Playgroud)