Skip to main content

Masonry Section

A section that packs its columns into a masonry grid — drop in columns at any width and they stack vertically like tetris blocks to fill the gaps, with no fixed column count. Its options live across the Layout, Styling, Animations, and Advanced tabs.

Layout​

  • How it packs — an informational note: columns keep their own width (1/2, 1/3, 2/3, 1/4 …) and stack to fill the gaps automatically.
  • Gap — space between items: Use Default Gap (matches the site/standard-section gutter), Extra Small (0.5rem), Small (1rem), Medium (1.5rem), Large (2rem), or Extra Large (3rem).
  • Full Width — switch. On, the grid spans the full container-fluid width; off, it's constrained to the site container width.

Styling​

  • Background — a background-pro control with stacking color, gradient, image and video layers (image over gradient over color).
  • Padding Top — top padding for the section, e.g. 40px or 3rem.
  • Padding Bottom — bottom padding for the section, e.g. 40px or 3rem.

Animations​

Standard entrance-animation controls (effect, duration, delay, offset).

Advanced​

Custom CSS class/ID, responsive visibility toggles, custom attributes, and margin/padding.