Components

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.

image

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.

You can display products, portfolio, images etc where you can set three images in a row with the help of tailwind photo gallery.

Gallery image
Gallery image
Gallery image
Gallery image
Gallery image
Gallery image
Gallery image
Gallery image
Gallery image 
<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>

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.

Gallery image
Gallery image
Gallery image
Gallery image
Gallery image
Gallery image 
<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>

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.

Gallery image
Gallery image
Gallery image
Gallery image 
<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>