Tailwind grid gallery, First column height is large causing whitespace

Question

Hi I'm designing a gallery with Tailwind and Vuejs. I'm having trouble creating a masonry type effect in gallery either using flex or grid layout system.

The first image is the cover image and is double in height. In the image below the whitespace must be covered with a image.

The 3rd picture instead of showing up on the right whitespace, it goes down to row 2.

My code is :

    <div id="Gallery" class="grid grid-cols-3 gap-2">
            <div class="gallery-img text-center shadow" :class="(index == 0)?'col-span-2 cover':''"  v-for="(img,index) in Images">
                <img class="w-full rounded-lg" :src="img.url" />
            </div>
            <div class="gallery-img bg-green-100 shadow add_button flex sm:justify-center ">
                <button type="button" class="btn ">Add</button>
            </div>
        </div>

Styles are:

.gallery-img.cover{
    width:289px !important;
    height:289px;
}
.gallery-img{
    width:196px;
    height:141px;
}