Css-Only Masonry Layout

How to render the item horizontally (Masonry Layout )?

I end up with a package solution and it works perfectly fine!

DaPotatoMan/vue-next-masonry

and this is how it looks like

<masonry
            :cols="{ default: 4, 1024: 3, 768: 2, 640: 1 }"
            :gutter="{ default: 40, 1024: 30, 768: 20 }"
        >
            <div v-for="(post, index) in posts.data" :key="index" class="mb-10">
                <ExploreCard
                    v-for="(post, index) in posts.data"
                    :key="index"
                    :post="post"
                    :canLike="this.canLike"
                />
            </div>
</masonry>

In this way, all the post is rendered in horizontal order !

Remove spaces caused by grid rows by using elements with variable heights

from my comment

You can either span .test-one through 2 rows (see grid-row: xx;) in your favorite grid tutorial) , take a look at masonry grid (here in the search) or even use column CSS if that's fine for you. –
G-Cyrillus
1 min

here an example via grid-row-start/end like you did for column :

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}

#test-one {
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: red;
  grid-row-start: 1;
  grid-row-end:3;
  height: 100px;
  width: 100%;
}

#test-two {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: blue;
  height: 50px;
  width: 100%;
}

#test-three {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: green;
  height: 50px;
  width: 100%;
}

<div id="grid">
  <div id="test-one">Hello Box</div>
  <div id="test-two">Hey Box</div>
  <div id="test-three">Please no top gap to the "Hey Box"</div>
</div>