Tailwind CSS Gallery
Make a Tailwind Image Gallery using the masonry grid design. The picture gallery tool lets you show many pictures in a grid pattern.
You can change the appearance of the gallery by using the flex and grid classes from Tailwind CSS. These classes allow you to modify the styles, sizes, and colors.
You can change the way the image gallery looks and its different features to match your preferences using the special classes from Tailwind CSS.
Default gallery
You can display products, portfolio, images etc where you can set three images in a row with the help of tailwind photo gallery.
<div class="grid grid-cols-2 md:grid-cols-3 gap-5">
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688025668.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029344.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029370.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029384.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029394.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029408.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029424.jpg" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029434.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029447.jpg" alt="Gallery image" />
</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Masonry grid
Masonry grid in tailwind css image gallery uses css grid to show images of different width and size in an appealing manner. here, images are placed auto aligned irrespective of their height and width.
<div class="columns-1 md:columns-2 xl:columns-3 gap-7 ">
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="Gallery image" />
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031232.jpg" alt="Gallery image" />
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031357.jpg" alt="Gallery image" />
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031375.jpg" alt="Gallery image" />
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031396.jpg" alt="Gallery image" />
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031414.png" alt="Gallery image" />
</div>
</div>Quad Gallery
Use Tailwind Gallery to show images which look well organized. As the name suggests it divides the available space into equal size quadrants and places four images of the same size.
<div class="grid grid-cols-2 gap-6">
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688025668.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029344.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029370.png" alt="Gallery image" />
</div>
<div>
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688029384.png" alt="Gallery image" />
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More