Interactive demonstrations
The Responsive Slot Layout grid replaces rigid column classes with a flexible, data-driven system.
Instead of hard-coding “col-4 / col-8”, you define how many columns you want at each breakpoint using
simple data-cols-* attributes. The JavaScript layout engine then calculates the right
number of columns per container based on its width and the number of items.
Every grid is just a .slot-layout with child .slot-item elements.
You can nest grids inside grids, combine them with cards, accordions, and modals, and let RSL
automatically adapt the layout across small screens, tablets, desktops, and beyond.
Quick overview:
.slot-layout for any responsive grid container..slot-item (or .nested-slot-item for inner grids) for each child element.data-cols-xs, data-cols-sm,
data-cols-md, data-cols-lg, data-cols-xl,
and data-cols-xxl.
This is the simplest grid: a .slot-layout with four items and no breakpoint attributes.
RSL detects the container width and automatically chooses a column count that feels balanced at each screen size.
1 of 4
2 of 4
3 of 4
4 of 4
Here we explicitly define how many columns to use at each breakpoint: 1 column on extra-small screens, 2 on small, 3 on medium, and 4 on large and up. This is the closest equivalent to Bootstrap’s manual grid, but driven by attributes instead of classes.
Item 1
Item 2
Item 3
Item 4
Each .slot-layout can have its own column rules. Below, the first row uses a simple
2-column layout on medium screens, while the second row uses a denser 3-column layout on the same breakpoint.
This makes it easy to mix “hero” rows, dense link grids, and feature rows without changing your HTML structure.
50% width on md+
50% width on md+
1 of 3
2 of 3
3 of 3
You can nest grids inside any .slot-item using .nested-slot-layout and
.nested-slot-item. This is helpful for building layouts like “card with a mini grid inside”
or forms with grouped fields.
.slot-item in a 2-column layout on large screens.
.nested-slot-layout with its own column rules.
Parent column content
Nested grid:
A
B
C
D
RSL also includes simple container helpers that work with any grid:
.container (fixed width), .container-fluid (wide gutters),
.container-full (edge-to-edge), and .container-flex (flex-centered).
Fluid 1
Fluid 2
Fluid 3
Fluid 4
Full 1
Full 2
Full 3
Full 4
Full 5
Full 6
.slot-item (headings, lists, buttons, links) to convey structure, not just visual position.