, , etc.
- Voeg een id attribuut toe voor navigatie en toegankelijkheid.
- Zorg voor consistente content binnen grid items.
- Test de layout op verschillende schermgroottes.Grid CSS component.
npm install @dictu/gridDe grid component biedt een flexibel en responsief grid systeem voor het
organiseren van content in kolommen van het Dictu Design Systeem.
Je kunt de CSS zo in je project installeren:
``console`
npm install --save-dev @dictu/grid
Je kunt de CSS uit node_modules/ importeren:
`html`
Als je CSS imports gebruikt vanuit JavaScript:
`javascript`
import "@dictu/grid/dist/index.css";
- Gebruik altijd de .dictu-grid class voor de grid container..dictu-grid--columns-{1-4}
- Specificeer het aantal kolommen met modifier
klassen.
- Gebruik semantische HTML binnen grid items: , , etc.id
- Voeg een attribuut toe voor navigatie en toegankelijkheid.
- Zorg voor consistente content binnen grid items.
- Test de layout op verschillende schermgroottes.
` html`
Gepubliceerd op 11 juli 2025
Gepubliceerd op 10 juli 2025
Gepubliceerd op 9 juli 2025
- .dictu-grid — hoofdcontainer voor het grid systeem.dictu-grid--columns-1
- — één kolom layout.dictu-grid--columns-2
- — twee kolommen layout.dictu-grid--columns-3
- — drie kolommen layout (standaard).dictu-grid--columns-4
- — vier kolommen layout.dictu-grid--autoflow
- — automatische plaatsing van items in kolommen
De component gebruikt design tokens voor layout, spacing, etc. Zie
proprietary/design-tokens/src/components/grid.tokens.json voor een overzicht
van beschikbare tokens. Voorbeeld:
`css`
.dictu-grid {
--govnl-grid-gap-row-max: 2rem;
--govnl-grid-gap-column-max: 2rem;
--govnl-grid-gap-row-min: 1rem;
--govnl-grid-gap-column-min: 1rem;
--govnl-grid-template-rows-auto: auto;
--govnl-grid-template-columns-col-1: 1fr;
--govnl-grid-template-columns-col-2: repeat(2, 1fr);
--govnl-grid-template-columns-col-3: repeat(3, 1fr);
--govnl-grid-template-columns-col-4: repeat(4, 1fr);
}
Het grid systeem past zich automatisch aan verschillende schermgroottes aan:
- Desktop (>768px): Volledige kolom configuratie
- Tablet (768px-480px): Gereduceerd aantal kolommen waar nodig
- Mobile (<480px): Meestal single-column layout
- Spacing: Kleinere gaps op mobiele apparaten voor optimaal ruimtegebruik
- Gebruik semantische HTML elementen (, ) voor grid items.lang
- Voeg een attribuut toe voor de juiste taal.aria-label
- Gebruik logische heading niveaus die aansluiten bij de paginastructuur.
- Zorg voor voldoende kleurcontrast in grid items.
- Test toetsenbordnavigatie door alle interactieve elementen.
- Gebruik voor context waar nodig.
- Zie
WCAG 2.1.3 Info and Relationships,
WCAG 2.4.6 Headings and Labels
en
WCAG 1.4.3 Contrast.
De basis grid component zonder content, toont drie lege placeholder items.
`js`
export const Default = {
args: {},
parameters: {
docs: {
description: {
story: defaultDocs,
},
},
},
};
Een twee-kolommen grid met afbeeldingen die verschillende aspect ratio's
demonstreert.
`js
export const WithImages = {
args: {
content:
src="/example-image.jpg"
alt="Eerste voorbeeld afbeelding"
loading="lazy"
width="640"
height="360" />
,`
columns: 2,
id: "page-grid-images",
},
};
Een drie-kolommen grid met volledige kaart componenten inclusief afbeeldingen,
tekst en metadata.
`js
export const WithCards = {
args: {
content:
,`
columns: 3,
},
};
Een uitgebreid grid met zes kaart componenten verspreid over meerdere rijen,
demonstreert schaalbaarheid.
`js
export const WithCardsOnMultipleRows = {
args: {
content:
,`
columns: 3,
},
};
De page-grid component kan elk type content bevatten, maar werkt uitstekend
samen met:
- Card: Voor gestructureerde content blokken
- Image: Voor visuele galerijen
- Paragraph: Voor tekst content
- Heading: Voor sectie titels
- Link: Voor navigatie elementen
De styling wordt verzorgd door de page-grid CSS en gebruikt:
- CSS Grid: Voor moderne, flexibele layouts
- Design tokens: Voor consistente spacing en responsive gedrag
- Modifier klassen: Voor verschillende kolom configuraties
- Media queries: Voor responsive aanpassingen
`html`
`html`
`html``
- Modern browsers: Volledige CSS Grid ondersteuning
- IE 11: Graceful degradation met fallback layouts
- Progressive enhancement: Basis functionaliteit werkt overal
- Efficient rendering: Native CSS Grid voor optimale prestaties
- Lazy loading: Ondersteunt lazy loading van content
- Minimal CSS: Alleen benodigde styles worden geladen
- Responsive images: Werkt samen met responsive image technieken
EUPL-1.2