Balanced Layout - Quick Start Guide

Create beautiful masonry-style layouts in minutes

Back to Examples

3-Minute Setup

1 Include Files (Add to <head>)

Required Files • HTML

2 Include JavaScript (Add before </body>)

Required JavaScript • HTML

3 Create Your Balanced Layout

Basic Structure • HTML



    
    

        
Card 1

    

    
    

        
Card 2

    

    
    

        
Card 3
✓ Done! Your masonry layout is now active and will automatically balance items across columns at each breakpoint.

Common Use Cases

1. Image Gallery

Perfect for photos with varying heights

Code • HTML



    
    

        Photo 1
    

    
    

        Photo 2

2. Blog Posts / Articles

Display article cards with varying content lengths

Code • HTML

3. Product Showcase

Display products with different descriptions and features

Code • HTML



    
    

        

            Product
            
Product Name

            
Description...

4. Dashboard Widgets

Balance dashboard cards with different data visualizations

Code • HTML



    
    

        

            
Sales

Quick Reference

Data Attributes

Attribute Purpose Values
data-layout Activates balanced mode "balanced"
data-slots-xs / data-cols-xs Columns for extra-small screens Number (e.g., "1")
data-slots-sm / data-cols-sm Columns for small screens Number (e.g., "2")
data-slots-md / data-cols-md Columns for medium screens Number (e.g., "2" or "3")
data-slots-lg, -xl, -xxl (and data-cols-*) Columns for large+ breakpoints; inherit from the last defined value if omitted Number

Breakpoints

Breakpoint Width Range Attributes Used
XS < 576px data-slots-xs / data-cols-xs (default 1)
SM ≥ 576px and < 768px data-slots-sm / data-cols-sm, falling back to XS if not set
MD ≥ 768px and < 992px data-slots-md / data-cols-md, falling back to SM → XS
LG ≥ 992px and < 1200px data-slots-lg / data-cols-lg, falling back to MD → SM → XS
XL ≥ 1200px and < 1600px data-slots-xl / data-cols-xl, falling back to LG → … → XS
XXL ≥ 1600px data-slots-xxl / data-cols-xxl, falling back to XL → … → XS

How It Works

The Balancing Algorithm:
  1. Reads column count from data-slots-* and/or data-cols-* based on container width
  2. Creates that many .rsl-smart-column wrapper divs
  3. Tracks the height of each column
  4. Places each .slot-item into the currently shortest column
  5. Recalculates on window resize with debouncing for performance
⚠ Important: Only containers with data-layout="balanced" are affected. All other .responsive-slot-layout containers continue using the standard CSS Grid layout.

Normal Grid vs Balanced Layout

Normal Grid Layout

Balanced Layout

Pro Tips

✨ Tip 1: Use data-slots-lg="3" for most desktop content—it balances well without making cards too narrow.
✨ Tip 2: For image galleries, try data-slots-lg="4" or higher for a strong masonry effect.
✨ Tip 3: Always set data-slots-xs="1" (or data-cols-xs="1") for mobile to ensure readability.
✨ Tip 4: Remember that the algorithm optimizes by height, not document order—don’t use balanced mode when strict ordering is critical.
✨ Tip 5: Because the layout recalculates on resize, it works well with dynamic heights (like images or cards that load data).

Troubleshooting

Items Not Balancing?

Wrong Number of Columns?

Layout Not Updating on Resize?

Next Steps

See It In Action

Open balanced-layout.html in your browser

Copy Examples

Use playground.html as a template

More Layouts

Explore other RSL components and patterns

Back to Examples