Grid systeem

Byzantium biedt vijf grid-varianten. Kies op basis van de densiteit die je layout vraagt.

VariantKolommenGebruikDeelbaar door
4-col4Dashboard tiles, feature blocks24
8-col8Product-grids, galerijen248
12-col12Algemene pagina-layouts (standaard)234612
16-col16Admin, data-tabellen, design tools24816
24-col24Complexe dashboards, maximale grip234681224

Interactieve demo

Kolommen
Gap
1
2
3
4
5
6
7
8
9
10
11
12

<ByzGrid :cols="12" gap="md">

Variant A — 4 kolommen

Ideaal voor dashboard tiles, stat-kaarten en feature blocks. Breed en overzichtelijk.

1/4
Statistiek
1/4
Statistiek
1/4
Statistiek
1/4
Statistiek
3/4 — Hoofdinhoud
1/4
Zijpaneel

<ByzGrid :cols="4" gap="md">

Variant B — 8 kolommen

Tussenliggende densiteit. Geschikt voor product-grids, galerijen en hybride layouts.

Volledige breedte (8/8)
Helft (4/8)
Helft (4/8)
2/8
2/8
2/8
2/8

<ByzGrid :cols="8" gap="md">

Variant C — 12 kolommen Standaard

De industriestandaard. Deelbaar door 2, 3, 4 en 6. Maximale compositievrijheid voor alle pagina-layouts.

12/12 — Hero / banner
8/12 — Hoofdinhoud
4/12 — Zijbalk
4/12
4/12
4/12
3/12
3/12
3/12
3/12

<ByzGrid :cols="12" gap="md">

Variant D — 16 kolommen

Fijnmaziger dan 12-col. Handig voor data-rijke interfaces, design tools en admin-panelen waar pixelprecisie telt.

16/16
10/16 — Inhoud
6/16 — Zijpaneel
4/16
4/16
4/16
4/16

<ByzGrid :cols="16" gap="sm">

Variant E — 24 kolommen

Maximale granulariteit. Deelbaar door 2, 3, 4, 6, 8 en 12. Bedoeld voor complexe dashboard-interfaces en compositietools.

24/24
16/24 — Inhoud
8/24 — Zijbalk
6/24
6/24
6/24
6/24
8/24
8/24
8/24

<ByzGrid :cols="24" gap="xs">

Variant F — Auto-fill

Geen vaste kolomtelling. Kolommen passen automatisch in de beschikbare breedte. Ideaal voor kaart-grids en productoverzichten zonder JS-breakpoints.

auto-sm min 12rem
Kaart 1
Kaart 2
Kaart 3
Kaart 4
Kaart 5
Kaart 6
auto-md min 18rem
Kaart 1
Kaart 2
Kaart 3
Kaart 4
Kaart 5
Kaart 6
auto-lg min 24rem
Kaart 1
Kaart 2
Kaart 3
Kaart 4

Responsive spans

Geef per breakpoint een ander span-object mee via het span prop.

default:12 / md:6 / lg:4
default:12 / md:6 / lg:4
default:12 / md:12 / lg:4 
<ByzGrid :cols="12" gap="md">
  <ByzCol :span="{ default: 12, md: 6, lg: 4 }">
    Volledig → half → derde
  </ByzCol>
</ByzGrid>

CSS utility classes

Gebruik de grid ook zonder Vue components — puur met CSS klassen.

<!-- 12-koloms grid via utility classes -->
<div class="byz-grid byz-grid--12 byz-gap-md">
  <div class="byz-col-span-8 byz-col-span-md-6">Inhoud</div>
  <div class="byz-col-span-4 byz-col-span-md-6">Zijbalk</div>
</div>

<!-- Auto-fill kaart-grid -->
<div class="byz-grid byz-grid--auto-md byz-gap-lg">
  <div>Kaart A</div>
  <div>Kaart B</div>
</div>