CSS Grid Generator — Tweedimensionale Layouts Bouwen

CSS Grid is de krachtigste layouttool in CSS. Onze generator laat je kolommen, rijen en gutter visueel definiëren en genereert kant-en-klare Grid-code.

Grid-concepten

grid-template-columns definieert kolombreedtes. grid-template-rows definieert rijhoogtes. gap (of grid-gap) stelt de ruimte tussen cellen in. fr (fraction unit) verdeelt beschikbare ruimte proportioneel.

Responsive Grid met auto-fill

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) maakt een responsive grid zonder media queries. Kolommen passen automatisch aan op de beschikbare breedte. Minimumgrootte (250px) voorkomt te smalle kolommen op mobiel.

Grid-plaatsing

grid-column: 1 / 3 laat een element twee kolommen beslaan. grid-area geeft een element een naam voor plaatsing. grid-template-areas laat je een visuele layout beschrijven in tekst. Krachtig voor complexe pagina-layouts.