Explore

4 columns (desktop), fewer columns as width narrows, 1 column on mobile

This grid targets four columns on wide screens and steps down through common breakpoints.

Teaser image

Teaser 1

Four columns for high-density browsing.

4 colOpen

Teaser image

Teaser 2

Ideal when teasers are short and visual.

4 colOpen

Teaser image

Teaser 3

Rows stack naturally as you add more cards.

4 colOpen

Teaser image

Teaser 4

Use muted borders for separation on black.

4 colOpen

Teaser image

Teaser 5

Content stays consistent across many rows.

4 colOpen

Teaser image

Teaser 6

Breakpoints step down to 3, then 2, then 1.

4 colNext

Teaser image

Teaser 7

Stable spacing makes dense grids comfortable.

4 colOpen

Teaser image

Teaser 8

Card components remain reusable across pages.

4 colOpen

Teaser image

Teaser 9

A clean look without excessive styling.

4 colOpen

Teaser image

Teaser 10

Use the variant pages to validate your design.

4 colAuto

Teaser image

Teaser 11

Multiple rows are expected and supported.

4 colOpen

Teaser image

Teaser 12

Fixed media height keeps rows aligned.

4 colOpen