Interactive demonstrations
Get up and running in 5 minutes with our Quick Start Guide!
View Quick Start Guide Download RSL Example PackThe balanced layout mode creates a masonry-style layout by distributing items into columns based on their height. Items are placed in the shortest column to create a balanced, visually appealing layout.
data-slots-* and/or data-cols-* (-xs, -sm, -md, -lg, -xl, -xxl) with inheritance
This layout uses data-layout="balanced" with:
1 column on phones, 2 columns on medium screens, and 3 columns from large screens and up,
based on the configured data-slots-* values.
This is a short card with minimal content.
This is a tall card with more content to demonstrate the balancing algorithm.
The balanced layout will place items in the shortest column, creating a masonry effect.
This helps prevent large gaps at the bottom of columns.
This is a medium-height card.
It has a bit more content than the short card.
Another short card.
Medium card here.
With some additional text content.
A tall card with lots of content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The balancing algorithm ensures this card is placed optimally.
Short card example.
Medium-height content here.
The layout adapts responsively.
Card 1
Content here...
Card 2
More content...
styles/sections.cssjavascript/smart-sections-balanced.jsdata-layout="balanced" to your .responsive-slot-layoutdata-slots-xs, data-slots-sm, data-slots-md, data-slots-lg, data-slots-xl, data-slots-xxldata-cols-* attributes (data-cols-xs, data-cols-sm, etc.)The balanced layout script:
data-slots-* and/or data-cols-* based on the container width.rsl-smart-column wrapper divs.slot-item into the currently shortest columnBalanced layouts use the same breakpoint logic as the main RSL layout script: each larger breakpoint inherits from the last defined value.
data-slots-xs / data-cols-xs (default 1)data-slots-sm / data-cols-sm, falling back to XS if not setdata-slots-md / data-cols-md, falling back to SM → XSdata-slots-lg / data-cols-lg, falling back to MD → SM → XSdata-slots-xl / data-cols-xl, falling back to LG → … → XSdata-slots-xxl / data-cols-xxl, falling back to XL → … → XSThe standard grid creates uniform columns, which can leave gaps when items have different heights.
Short content
Tall content with multiple paragraphs.
This creates gaps in the grid layout.
The balanced layout handles this better.
Medium content.
Short again
The balanced layout distributes items by height, minimizing gaps and creating a more compact layout.
Short content
Tall content with multiple paragraphs.
This creates gaps in the grid layout.
The balanced layout handles this better.
Medium content.
Short again