在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屋！