Html/ Tailwind : How to create an adaptative grid of pictures with variable row height?

Question

We're looking to implement an adaptive grid of images. Something similar to this in HTML and Tailwind or CSS:

Images take up the entire width of the screen and wrap when the line height exceeds or falls below certain thresholds. As the screen size changes, the heights of the rows vary independently so that the entire width of the screen is used by the images on a given row.

We have tried using Flex and Flex-Warp, but we can't find the right solution. How would you implement this?

Answer 1

You can use grid

<div class="grid grid-cols-12 gap-4">
    <div class="col-span-12 sm:col-span-6 md:col-span-4 lg-col-span-3 2xl:col-span-2">
        <div class="h-80">
            <div class="h-full w-auto bg-blue-200"></div>
        </div>
    </div>
    <div class="col-span-12 sm:col-span-6 md:col-span-4 lg-col-span-3 2xl:col-span-2">
        <div class="h-80">
            <div class="h-full w-auto bg-blue-200"></div>
        </div>
    </div>
    <div class="col-span-12 sm:col-span-6 md:col-span-4 lg-col-span-3 2xl:col-span-2">
        <div class="h-80">
            <div class="h-full w-auto bg-blue-200"></div>
        </div>
    </div>
    <div class="col-span-12 sm:col-span-6 md:col-span-4 lg-col-span-3 2xl:col-span-2">
        <div class="h-80">
            <div class="h-full w-auto bg-blue-200"></div>
        </div>
    </div>
    <div class="col-span-12 sm:col-span-6 md:col-span-4 lg-col-span-3 2xl:col-span-2">
        <div class="h-80">
            <div class="h-full w-auto bg-blue-200"></div>
        </div>
    </div>
    <div class="col-span-12 sm:col-span-6 md:col-span-4 lg-col-span-3 2xl:col-span-2">
        <div class="h-80">
            <div class="h-full w-auto bg-blue-200"></div>
        </div>
    </div>
    <div class="col-span-12 sm:col-span-6 md:col-span-4 lg-col-span-3 2xl:col-span-2">
        <div class="h-80">
            <!-- replace div by you img -->
            <div class="h-full w-auto bg-blue-200"></div>
        </div>
    </div>
</div>