Gallery Image Masonry Grid Form Layout Using Tailwind UI
Masonry grid with Tailwind CSS is a flexible column layout that automatically adjusts item height and designed using utility classes from Tailwind CSS.
gallery
Loading component...
71 lines
<div class="container mx-auto mt-8">
<h1 class="text-center font-bold text-3xl my-10 text-gray-800">Gallery Masonry Grid</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="grid gap-4">
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1598243572731-54cf830091c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="Image 2">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1494389715136-ee2a925f8a0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
alt="Image 3">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1566787944388-18391bbc0c1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80"
alt="Image 2">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1572335283689-5845ffb6ab14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="Image 3">
</div>
</div>
<div class="grid gap-4">
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1566787944388-18391bbc0c1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80"
alt="Image 2">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1543457625-e5d4636c0094?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
alt="Image 3">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1567650807609-c610c4a46026?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=465&q=80"
alt="Image 3">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1530679703238-74961c0d1639?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
alt="Image 3">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1566787944388-18391bbc0c1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80"
alt="Image 3">
</div>
</div>
<div class="grid gap-4">
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1569551483249-c409163f9153?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="Image 2">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1598243572731-54cf830091c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="Image 3">
</div>
<div>
<img class="h-auto max-w-full"
src="https://images.unsplash.com/photo-1597778912496-9c9b6a50c485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80"
alt="Image 3">
</div>
</div>
</div>
</div>