KPC
Kevin Powell - Community•13mo ago
Stu

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;
  }
}
No description
1 Reply
Hidi_
Hidi_•13mo ago
Most likely due to the fixed height on your .box

Did you find this page helpful?