Calcolatore di Colonne Grid
Larghezze delle colonne per qualsiasi contenitore, numero di colonne e gutter — con codice CSS grid pronto da copiare e dimensioni di span multi-colonna.
817 visualizzazioni
La Matematica delle Colonne
Colonna = (contenitore − (colonne−1) × gutter) ÷ colonne. Un contenitore da 1200 px con 12 colonne e gutter da 24 px dà colonne da 78 px; un elemento che si estende su 4 colonne è 4×78 + 3×24 = 384 px. Lo strumento elenca ogni larghezza di span così puoi riportare misure esatte nei file di design.
In CSS raramente si scrivono questi valori a mano: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px lascia che sia il browser a fare la divisione. I valori in pixel contano per i frame di Figma, le esportazioni di immagini e per capire a cosa si risolve realmente 1fr ai tuoi breakpoint.
Domande Frequenti
I margini vanno inclusi nella larghezza del contenitore?
No — inserisci la larghezza del contenuto (contenitore meno margini/padding laterali). Un design da 1440 px con 120 px di margine per lato ha un contenitore di lavoro da 1200 px.
12 colonne o un altro numero?
12 è divisibile per 2, 3, 4 e 6, per questo è diventato il valore predefinito. Dashboard densi a volte usano 24; pagine marketing semplici stanno bene con 6 o anche 4.
Strumenti Simili
Segnala un Problema
Calcolatore di Colonne Grid