1 reply

Make grid container like having margin-top

Here my grid item (

.box

.box

) are overflowing to the top-side of the grid container (

.wrapper

.wrapper

).
The problem is I don't want the

.box

.box

looks overlapping with the

.wrapper

.wrapper

previous sibling (

.first-item

.first-item

).
One thing I can do to solve this is with adding some pixels for

margin-top

margin-top

to the grid-container.
But is there another way so the spacing can be dynamic to the height of overflowing

.box

.box

?

HTML:

<div class="first-item">
</div>

<div class="wrapper">
  <div class="box">
  
  </div>
</div>

<div class="first-item">
</div>

<div class="wrapper">
  <div class="box">
  
  </div>
</div>

CSS:

.first-item {
  width: 340px;
  height: 190px;
  background-color: #573F4C;
  margin-bottom: 20px;
}

.wrapper {
  background: #933469;
  display: grid;
  max-width: 300px;
  grid-template: 150px / 300px;
  padding: 20px;
  place-items: end;
  /* margin-top: 150px; // I want to looks like this */
  
  .box {
    background-color: #E4C3D1;
    width: 100%;
    height: 300px;
  }
}

.first-item {
  width: 340px;
  height: 190px;
  background-color: #573F4C;
  margin-bottom: 20px;
}

.wrapper {
  background: #933469;
  display: grid;
  max-width: 300px;
  grid-template: 150px / 300px;
  padding: 20px;
  place-items: end;
  /* margin-top: 150px; // I want to looks like this */
  
  .box {
    background-color: #E4C3D1;
    width: 100%;
    height: 300px;
  }
}

Make grid container like having margin-top

Here my grid item (

.box

.box

) are overflowing to the top-side of the grid container (

.wrapper

.wrapper

).
The problem is I don't want the

.box

.box

looks overlapping with the

.wrapper

.wrapper

previous sibling (

.first-item

.first-item

).
One thing I can do to solve this is with adding some pixels for

margin-top

margin-top

to the grid-container.
But is there another way so the spacing can be dynamic to the height of overflowing

.box

.box

?

HTML:

<div class="first-item">
</div>

<div class="wrapper">
  <div class="box">
  
  </div>
</div>

<div class="first-item">
</div>

<div class="wrapper">
  <div class="box">
  
  </div>
</div>

CSS:

.first-item {
  width: 340px;
  height: 190px;
  background-color: #573F4C;
  margin-bottom: 20px;
}

.wrapper {
  background: #933469;
  display: grid;
  max-width: 300px;
  grid-template: 150px / 300px;
  padding: 20px;
  place-items: end;
  /* margin-top: 150px; // I want to looks like this */
  
  .box {
    background-color: #E4C3D1;
    width: 100%;
    height: 300px;
  }
}

.first-item {
  width: 340px;
  height: 190px;
  background-color: #573F4C;
  margin-bottom: 20px;
}

.wrapper {
  background: #933469;
  display: grid;
  max-width: 300px;
  grid-template: 150px / 300px;
  padding: 20px;
  place-items: end;
  /* margin-top: 150px; // I want to looks like this */
  
  .box {
    background-color: #E4C3D1;
    width: 100%;
    height: 300px;
  }
}

Make grid container like having margin-top

Similar Threads

Make grid container like having margin-top

Similar Threads

Similar Threads

Similar Threads