如何使用网格在css中重叠元素

dm7nw8vv 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(196)

我想把box 2放在另外两个盒子的一半上面，但是，即使显式地定义了grid-template-columns对1fr的属性，它也会自动创建另一列。
index.html

<div class="grid-overlap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

style.scss

.grid-overlap {
        max-width: 40rem;
        width: 95%;`your text`
        margin: 2rem auto;
        gap: 1rem;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 1fr;

        .box {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            text-align: center;
            font-size: 3rem;
        }

        .box:nth-child(1) {
            grid-row: 1 / 3;
            background-color: dodgerblue;
        }
        .box:nth-child(2) {
            background-color: red;
            grid-row: 2 / 4;
            z-index: 100;
        }
        .box:nth-child(3) {
            grid-row: 3 / 5;
            background-color: tomato;
        }
    }

先谢了。

css

来源：https://stackoverflow.com/questions/75045143/how-to-overlap-elements-in-css-using-grid

2条答案

按热度按时间

wmtdaxz31#

我给出了一个重叠的例子，试着看看它是如何工作的，并在你的用例中使用它。

.grid-overlap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
}
.grid-overlap .box:nth-child(1) {
  grid-row: 1/3;
  grid-column: 1/3;
  background-color: dodgerblue;
}
.grid-overlap .box:nth-child(2) {
  background-color: rgba(255, 0, 0, 0.6);
  grid-row: 2/4;
  grid-column: 2/4;
}

<div class="grid-overlap">
  <div class="box">1</div>
  <div class="box">2</div>
</div>

赞(0）回复(0）举报 2023-01-10

wqlqzqxt2#

查看网格，我们可以看到第二个方块从第一个方块的中间开始，最后一个方块位于第一个方块的四分之一处和四分之三处。
这将产生宽度为6、高度为7的方形单元格。
由于不可能同时将网格尺寸设置为300px，并将网格宽度定义为rems（和%单位），因此此代码片段删除了300px设置，并将整个网格设置为问题中定义的宽度和纵横比6/7。
请注意，网格间隙未设置（默认为0），因为问题中给出的图片中未显示间隙。

body {
  width: 100vw;
  height: 100vh;
}

.grid-overlap {
  max-width: 40rem;
  width: 95%;
  aspect-ratio: 6 / 7;
  margin: 2rem auto;
  gap: 1rem;
  gap: 0;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-template-columns: repeat(6, 1fr);
}

.box {
  /*width: 300px;
            height: 300px;*/
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 3rem;
}

.box:nth-child(1) {
  grid-column: 1 / span 4;
  grid-row: 1 / span 4;
  background-color: dodgerblue;
}

.box:nth-child(2) {
  background-color: red;
  grid-column: 3 / span 4;
  grid-row: 3 / span 4;
  z-index: 100;
}

.box:nth-child(3) {
  grid-column: 2/ span 4;
  grid-row: 4 / span 4;
  background-color: tomato;
}

<body>
  <div class="grid-overlap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>

如果重要的尺寸是300px，那么使用它们来设置整个网格的宽度。

赞(0）回复(0）举报 2023-01-10

我来回答

如何使用网格在css中重叠元素

2条答案

相关问题

热门标签

最新问答