Grid-kolomcalculator
Kolombreedtes voor elke container, kolomaantal en gutter — met kopieerklare CSS-grid-code en meerkoloms span-afmetingen.
814 weergaven
De kolomwiskunde
Kolom = (container − (kolommen−1) × gutter) ÷ kolommen. Een container van 1200 px met 12 kolommen en gutters van 24 px geeft kolommen van 78 px; een element dat 4 kolommen overspant is 4×78 + 3×24 = 384 px. De tool toont elke span-breedte zodat u exacte maten naar ontwerpbestanden kunt overnemen.
In CSS codeert u dit zelden hard: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px laat de browser de deling doen. De pixelwaarden zijn belangrijk voor Figma-frames, afbeeldingsexports en om te begrijpen waar 1fr daadwerkelijk naar oplost bij uw breakpoints.
Veelgestelde vragen
Moeten marges in de containerbreedte worden meegerekend?
Nee — voer de inhoudsbreedte in (container min zijmarges/padding). Een ontwerp van 1440 px met 120 px marge aan elke kant heeft een werkcontainer van 1200 px.
12 kolommen of iets anders?
12 is deelbaar door 2, 3, 4 en 6, waardoor het de standaard werd. Dichte dashboards gebruiken soms 24; eenvoudige marketingpagina's komen prima uit met 6 of zelfs 4.
Vergelijkbare tools
Probleem melden
Grid-kolomcalculator