Grid

Responsive grid layout voor cards, producten en andere herhalende content.

Kolom varianten

2 kolommen

1
2
columns=2

3 kolommen

1
2
3
columns=3

4 kolommen

1
2
3
4
columns=4

Ruimte tussen items

gap="sm" (16px)

1
2
3

gap="md" (24px)

1
2
3

gap="lg" (32px)

1
2
3

Grid met cards

Project
Design

Project Alpha

Korte beschrijving van het project.

Project
Development

Project Beta

Korte beschrijving van het project.

Project
Branding

Project Gamma

Korte beschrijving van het project.

Responsive gedrag

> 1024px

Alle kolommen zichtbaar

768px - 1024px

4 → 2 kolommen, 3 → 2 kolommen

< 768px

1 kolom (gestapeld)

Component Props

Prop Type Default Description
columns 2 | 3 | 4 3 Aantal kolommen op desktop
gap 'sm' | 'md' | 'lg' 'md' Ruimte tussen grid items