Masonry Grid

---

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

---

Theme Masonry Grid Syntax

Masonry works on a container grid element with a group of child items.

<div class="cl-grid">
  <div class="cl-grid-sizer"></div>
  <div class="cl-grid-item">...</div>
  <div class="cl-grid-item cl-grid-item-width-2">...</div>
  <div class="cl-grid-item">...</div>
  ...
</div>

---

Three Column Grid

This is default masonry grid as the height adjust according to the content.

---

Two Column Grid

Add .cl-grid-item-width-half class to .cl-grid-sizer and .cl-grid-item elements to make it half width of the full available space. The height adjust according to the content.

---

Mixed Height And Width Grid

There are several helper classes for height and width of masonry grid items. .cl-grid-item-width-2 doubles the width of an item. .cl-grid-item-width-3 makes the item stretch to full 100% in width. .cl-grid-item-fixed-height sets items height to 340px, .cl-grid-item-fixed-height-2 doubles this height and .cl-grid-item-fixed-height-3 triples it.

---

Same Height And Width Grid

To make grid with same height and width items, either you can put same height content in items or you can set custom height of .cl-grid-item using .cl-grid-item-fixed-height, .cl-grid-item-fixed-height-2, .cl-grid-item-fixed-height-3 or any other helper classes.