Grid Playground

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.

Basic Auto Grid

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
Auto columns
2 of 4
Auto columns
3 of 4
Auto columns
4 of 4
Auto columns

Explicit Columns per Breakpoint

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 a manual grid, but driven by attributes instead of classes.

Item 1
xs:1 • sm:2 • md:3 • lg:4
Item 2
xs:1 • sm:2 • md:3 • lg:4
Item 3
xs:1 • sm:2 • md:3 • lg:4
Item 4
xs:1 • sm:2 • md:3 • lg:4

Different Grids, Same Page

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+
data-cols-md="2"
50% width on md+
data-cols-md="2"
1 of 3
data-cols-md="3"
2 of 3
data-cols-md="3"
3 of 3
data-cols-md="3"

Nested Grids

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.

Parent column
This is a standard .slot-item in a 2-column layout on large screens.
Nested grid
The inner layout uses .nested-slot-layout with its own column rules.
A
B
C
D

Containers: Fixed, Fluid, and Full Width

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

Column Spanning

Use data-span-* attributes to make items span multiple columns at specific breakpoints. This is perfect for featured items, hero sections, or asymmetric layouts.

Featured Item
data-span-md="2"
Item 2
1 column
Item 3
1 column
Item 4
1 column
Wide Item
data-span-md="3"

Gap Control

Control the spacing between grid items using the data-gap attribute. Values can be any CSS length unit.

Tight
0.5rem
gap
spacing
Spacious
2rem
gap
spacing