Gallery

Gallery components for your website, especially for the sections where you want to put a group of images.

---

Default gallery

<div class="gallery">
  <figure class="image-gallery">
    <img src="..." alt="..." />
  </figure>
</div>

---

Squared gallery

<div class="gallery is-squared">
  <figure class="image-gallery">
    <img src="..." alt="..." />
  </figure>
</div>

---

Masonry gallery

You can create a masonry gallery using Tailwind CSS in a few steps, you can divide the columns using Columns from Tailwind CSS. By Default is 4.

<div class="masonry-gallery columns-4">
  <figure class="image-gallery">
    <img src="..." alt="..." />
  </figure>
</div>

---

Gallery styles

Default style

Rounded style

Large rounded style

<div class="gallery">
  <figure class="image-gallery">
    <img src="..." class="image-gallery is-rounded" />
    <!-- is-rounded -->
  </figure>
  <figure class="image-gallery">
    <img src="..." class="image-gallery is-large-rounded" />
    <!-- is-large-rounded -->
  </figure>
</div>