Masonry

You can create a masonry layout by creating a div element with .masonry class. Then adding column (column-1/column-2/column-3/column-4/column-5/column-6) and column spacing(spacing-0/spacing-1/spacing-2/spacing-3/spacing-4/spacing-5) classes to the element to customize it.

Basic Masonry

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


<div class="masonry column-3 spacing-4">
  <div class="masonry-item">
    <div class="bg-white box-shadow-with-hover p-5">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="masonry-item">
    <div class="bg-white box-shadow-with-hover p-5">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="masonry-item">
    <div class="bg-white box-shadow-with-hover p-5">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="masonry-item">
    <div class="bg-white box-shadow-with-hover p-5">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>

© 2024 FlaTheme, All Rights Reserved.