在CSS-Grid中创建叠加层 [英] Creating overlay in CSS-Grid
问题描述
我正在尝试在CSS3网格中创建一个叠加层,但似乎无法弄清楚如何实现它。我已经在网上搜索过,但没有找到任何帮助。我想实现以下目标:
body {margin:0; padding:0;}。wrapper {display:grid; grid-template-rows:1f;宽度:100vw;高度:100vh; grid-template-areas: a b c; } .box {background-color:#444;颜色:#fff;}。a {网格区域:a;}。b {网格区域:b;}。c {网格区域:c;}
< div class = wrapper> < div class = box a> A< / div> < div class = box b> B< / div> < div class = box c> C< / div>< / div>
这里是指向Codepen的链接:
机构{
保证金:0;
填充:0;
}
.wrapper {
display:grid;
grid-template-rows:1f;
宽度:100vw;
高度:100vh;
网格模板区域:
a
b
c;
}
.box {
background-color:#444;
颜色:#fff;
}
.a {
网格区域:a;
}
.b {
网格区域:b;
}
.c {
网格面积:c;
}
.D {
网格区域:D;
}
< div class = wrapper>
< div class = box a> A< / div>
< div class = box b> B< / div>
< div class = box c> C< / div>
< div class = box D> C< / div>
< / div>
像这样:
网格模板区域不是这里最有用的东西。最好独立定义列/行,然后将元素单独分配给它们。然后根据需要对齐它们。
body {margin:0; padding:0;}。wrapper {margin:auto;宽度:90vw;显示:网格;高度:100vh; grid-template-columns:1fr; / *仅一列* / grid-template-rows:1fr auto; / * 2行* /} .a,.b {grid-column:1; / *第一列* / grid-row:1; / *第一行* /}。b {width:3em;高度:3em;自我调整:结束; / *列的底部* / justify-self:end; / *行的右边* / margin:1em;}。box {border:1px纯绿色;}
< div class = wrapper> < div class = box a> A< / div> < div class = box b> B< / div> < div class = box c> C< / div>< / div>
I am trying to create an overlay in CSS3 grid but I can't seem to figure out how I can go about achieving it. I have searched online but haven't found anything of help. I want to achieve something like below:
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;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>
Here is a link to codepen: https://codepen.io/anon/pen/PROVeY
Edited:
How to place div on left and right side overlay against the larger div behind it in CSS3 grid-layout
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;
}
.D {
grid-area: D;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box D">C</div>
</div>
Like this:
Grid-template areas aren't the most useful things here. Better to define the column / rows independently and then assign the elements to them indvidiually. Then align them as required.
body {
margin: 0;
padding: 0;
}
.wrapper {
margin:auto;
width:90vw;
display: grid;
height: 100vh;
grid-template-columns:1fr; /* only one column */
grid-template-rows:1fr auto; /* 2 rows */
}
.a,
.b {
grid-column:1; /* first-column */
grid-row:1; /* first row */
}
.b {
width:3em;
height:3em;
align-self: end; /* bottom of column */
justify-self: end; /* right of row */
margin:1em;
}
.box {
border:1px solid green;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>
这篇关于在CSS-Grid中创建叠加层的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!