CODEWITHSUNDEEP
cssgrid
Minux-Dev
Minux-Dev

Reputation: 27

How to overlap elements in css using grid

I want to place box 2 on top of both other boxes by half of them, however, even having explicitly defined grid-template-columns propriety to 1fr it automatically creates another column. Here is my attempt

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;
        }
    }

I hope this image can give you the idea

Thanks in advance.

Upvotes: 0

Views: 108

Answers (2)

A Haworth
A Haworth

Reputation: 36664

Looking at the grid we can see that the second square starts in the middle of the first one and that the last one is positioned at one quarter along and three quarters down the first square.

This leads to a grid of width 6 and height 7 square cells.

As it's not possible to have both the grid imensions set at 300px and the width of the grid to be defined in rems (and % units) this snippet drops the 300px settings and sets the overall grid to be the width as defined in the question and the aspect ratio 6/7.

Note that the grid gap is not set (defaults to 0) as no gap was shown in the picture given in the question.

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>

If the important dimensions were the 300px then use those to set the width of the overall grid.

Upvotes: 0

ashish singh
ashish singh

Reputation: 6914

I am giving one example of overlap, try to see how it works and use it in your use case.

.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>

Upvotes: 1

Related Questions