How to place Cards by Mosaic way?

Question

The height every of the card needs to be max-content.

I've set height to specific values for demonstrating the problem.

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5%;
    grid-auto-rows: min-content;
}

.card {
    background-color: lightblue;
}

<div class="container">
 <div class="card" style="height: 100px">
  1
 </div>
  <div class="card" style="height: 200px; background-color: yellow">
  2
 </div>
  <div class="card" style="height: 200px; background-color: yellow">
  3
 </div>
  <div class="card" style="height: 200px">
  4
 </div>
  <div class="card" style="height: 200px; background-color: green">
  5
 </div>
  <div class="card" style="height: 200px; background-color: red">
  6
 </div>
  <div class="card" style="height: 200px">
    7
 </div>
</div>

The problem is - There is a White space between 1 and 3 cards. Need to achive - no this extra white space. Card 3 needs to be excactly after 1

I've tried - grid-auto-rows: min-content - but it makes no result.

Cards with different height need to be exactly one after another one. without extra white space. (By Mosaic way).

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

What you're trying to achieve is called Masonry Layout.

You'll find a lot of example here https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ I hope it will help you to find which option better fits your needs.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 02 '20 at 02:39

Nazar Gondaruk

127
3

How to place Cards by Mosaic way?

1 Answers1

What you're trying to achieve is called Masonry Layout.