Removing gaps from rows

Question

I currently have a container with items having varying heights. I'm displaying them in columns of 5 and 3 items max per line. I tried the following implementation but there are huge gaps in the row that I can't seem to remove. How would I fix this?

body {
  background-color: #1E1E1E;
  display: flex;
  justify-content: center;
}

.masonry {
  width: 1200px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-row-gap: 10px;
}

.cell {
  background-color: #fff;
  width: 240px;
  margin: 10px;
}

<div class="masonry">
  <div style="height: 180px" class="cell"></div>
  <div style="height: 240px" class="cell"></div>
  <div style="height: 520px" class="cell"></div>
  <div style="height: 120px" class="cell"></div>
  <div style="height: 240px" class="cell"></div>
  <div style="height: 332px" class="cell"></div>
  <div style="height: 143px" class="cell"></div>
  <div style="height: 306px" class="cell"></div>
  <div style="height: 514px" class="cell"></div>
  <div style="height: 232px" class="cell"></div>
  <div style="height: 361px" class="cell"></div>
  <div style="height: 234px" class="cell"></div>
  <div style="height: 318px" class="cell"></div>
</div>

Which gaps do you want to remove, the horizontal, vertical or both? — Lee Taylor, Jul 27 '22 at 22:44
https://masonry.desandro.com/ Amazing little tool that'll allow you to re-build your grids on the go! Check out the site for examples/demos — BGPHiJACK, Jul 27 '22 at 22:46
@connexo this is not supported in all browsers unfortunately — devAR, Jul 27 '22 at 22:47
Set `.cell`'s css to `margin: 0px 10px;` and set `.masonry`'s css `grid-row-gap: 0px;` — Lee Taylor, Jul 27 '22 at 22:47

score 0 · Answer 1 · answered Jul 27 '22 at 22:58

I believe a structure like this with elements cover everywhere is what you need:

it can be achieved by grid-area or by using grid-column-start, grid-column-end, grid-row-start, and grid-row-end for each element based on how you want them to be positioned.
you can read more about it here

Removing gaps from rows

1 Answers1