0

I am creating a grid layout with cards where not all the cards have the same height. Now I want the gap in between the cards be the same, event when the height of the cards is different. It would be somewhat of a mosaic layout.

I am using Styled Components. This is what I have so far, but it doesn't seem to work.

export const Wrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  grid-auto-rows: minmax(0, 1fr);
`;

export const Card = styled.div`
  background: #ffffff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: space-between;
  height: fit-content;
`;

How would I get it so that the gap in between the rows would be the same, even without the consistent card height?

enter image description here

rjjdv
  • 339
  • 1
  • 3
  • 12
  • What would you like to achieve? if you want the same space between the Cards, then they won't be aligned at their tops. – Azu May 31 '23 at 19:11
  • If the cards themselves have different heights, how can the gaps be equal? Are you talking about the gaps between *cards* or just the gaps between *lines* of cards? – InSync May 31 '23 at 19:24
  • I mean the gaps between the cards. – rjjdv May 31 '23 at 19:27
  • in Wrapper tyr this replace `grid-auto-rows: minmax(0, 1fr);` to `grid-auto-rows: minmax(0, auto);` – Zakaria Zhlat May 31 '23 at 19:59

1 Answers1

0

I suggest you to play with column-count property. I haven't used it before, so not sure if this would satisfy your requirements as items don't have guaranteed order, but you may find some workarounds, I guess if you need to preserve order or maybe someone else will elaborate on this.

.wrapper {
  column-count: 4;
  max-width: max-content;
  border: 1px solid red;
  padding: 8px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid blue;
  break-inside: avoid;
  width: 100px;
}

.first {
  height: 50px;
}

.second {
  height: 65px;
}

.third {
  height: 80px;
}

.fourth {
  height: 25px;
}

.fifth {
  height: 45px;
}

.sixth {
  height: 55px;
}

.seventh {
  height: 60px;
}

.eighth {
  height: 150px;
}
<div class="wrapper">
  <div class="item first">
    1
  </div>
  <div class="item second">
    2
  </div>
  <div class="item third">
    3
  </div>
  <div class="item fourth">
    4
  </div>
  <div class="item fifth">
    5
  </div>
  <div class="item sixth">
    6
  </div>
  <div class="item seventh">
    7
  </div>
  <div class="item eighth">
    8
  </div>
</div>
Andyally
  • 863
  • 1
  • 9
  • 22