Grid System - Quick Start Guide

What Makes RSL Grid Different

Instead of rigid column classes like .col-4 and .col-8, RSL uses a flexible data-driven system:

• ✅ Define column counts per breakpoint using data-cols-* attributes
• ✅ JavaScript calculates exact widths automatically
• ✅ Inheritance: data-cols-md="3" applies to md, lg, xl, xxl automatically
• ✅ Override at any breakpoint for precise control

2-Minute Setup

1 Include Files

2 Create Your Grid

    
Item 1
    
Item 2
    
Item 3

                

Breakpoints Reference

Inheritance: Set Once, Apply Everywhere

    
Item

                

Pro Tips

Working with Dynamic Content

Grid layouts are calculated when the page loads and on window resize. However, if you're using grids inside components that show/hide content (like tabs, accordions, or modals), you may need to trigger a layout recalculation when the content becomes visible.

Problem: Grids Inside Hidden Content

When grid layouts are inside hidden elements (display: none), they can't be properly measured during the initial calculation. This commonly happens with:

• 📑 Tabs - Grids in inactive tab panels
• 📋 Accordions - Grids in collapsed sections
• 🔲 Modals - Grids in unopened dialogs
• 👁️ Show/Hide toggles - Any dynamically revealed content

Solution: Trigger Layout Recalculation

The layout.js script automatically recalculates grids on window resize events. You can leverage this to force recalculation when content becomes visible:

// When showing previously hidden content with grids inside
function showContent(contentElement) {
    // Make content visible
    contentElement.classList.add('active');

    // Trigger layout recalculation
    window.dispatchEvent(new Event('resize'));
}
                

Example: Tabs Component

function activateTab(tab, content) {
    // Hide all tab panels
    document.querySelectorAll('.tab-content').forEach(panel => {
        panel.classList.remove('active');
    });

    // Show selected tab panel
    content.classList.add('active');

    // Recalculate any grids inside the newly visible tab
    const grids = content.querySelectorAll('.slot-layout');
    if (grids.length > 0) {
        window.dispatchEvent(new Event('resize'));
    }
}
                

ADA Compliance