0

I have a CSS-Grid with two columns. Inside this columns i need to place item elements one after another. Now i have a problem that inside the grid the elements are always arranged in rows which means there are sometimes big gaps between elements inside a column. How can i change to grid so that there are just the normal margin gaps between two elements inside a column.

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 5vw;
}

.grid-item {
  background-color: red;
  margin-bottom: 5vw;
}

.grid-item:nth-child(1) {
  height: 20vw;
}

.grid-item:nth-child(2) {
  height: 30vw;
}

.grid-item:nth-child(3) {
  height: 10vw;
}

.grid-item:nth-child(4) {
  height: 40vw;
}
<div class="grid-wrapper">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
. See my example on codepen: https://codepen.io/yabaikumo/pen/YzRyozO
Adam
  • 5,495
  • 2
  • 7
  • 24
public9nf
  • 1,311
  • 3
  • 18
  • 48
  • grid-column-gap: 5vw; instead of vw what about using px or rem for gap – Nisha Jun 14 '23 at 09:46
  • You may be wanting [Masonry Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout) but this is experimental only. There are libraries that do this though. – Adam Jun 14 '23 at 10:14

0 Answers0