How to render the item horizontally (Masonry Layout )?

Question

I would like to render the items horizontally while the page load, refer to following images

<section
        tabindex="-1"
        class="relative mx-8 mt-10 mb-20 max-w-7xl focus:outline-none sm:mx-16 md:mx-20 lg:mx-24 xl:mx-auto"
    >
        <ul
            class="h-full w-full list-none columns-1 gap-4 space-y-12 overflow-hidden pb-32 md:columns-2 lg:columns-3 lg:gap-8 xl:columns-4"
        >
            <ExploreCard
                v-for="(post, index) in posts.data"
                :key="index"
                :post="post"
                :canLike="this.canLike"
            />
        </ul>       
</section>

Currently

Expected

Something like this,
https://reactjsexample.com/rendering-columns-from-a-list-of-children-with-horizontal-ordering/

I am looking for a Js, Vue, or CSS solution.

Answer 1

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 !