Kevin Powell - Community•2mo ago

Make grid container like having margin-top

Here my grid item (.box) are overflowing to the top-side of the grid container (.wrapper). The problem is I don't want the .box looks overlapping with the .wrapper previous sibling (.first-item). One thing I can do to solve this is with adding some pixels for margin-top to the grid-container. But is there another way so the spacing can be dynamic to the height of overflowing .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;
  }
}

1 Reply

Hidi_•2mo ago

Most likely due to the fixed height on your .box

Gaming

Programming

Make grid container like having margin-top