A cosa serve calc() in CSS
calc() permette di fare calcoli direttamente nel CSS mescolando unità diverse, cosa impossibile con un valore singolo: tutta la larghezza meno la sidebar (100% - 280px), tutta l’altezza dello schermo meno l’header (100vh - 64px), un padding che somma una base fissa e una parte fluida (1rem + 2vw). Il browser risolve l’espressione al momento del rendering.
Con questo generatore costruisci l’espressione termine per termine: ogni termine ha un valore e un’unità (px, rem, em, %, vw, vh, vmin, vmax, ch) e li colleghi con gli operatori + - * /. Lo strumento controlla le regole che fanno fallire calc() in silenzio: gli spazi obbligatori attorno a + e -, e il fatto che moltiplicazioni e divisioni richiedono un numero senza unità.
Il problema di calc() è che il risultato dipende dal contesto: il 100% di cosa? Quanto vale 1em qui? Per questo puoi impostare la larghezza del contenitore padre, le dimensioni del viewport, la dimensione del font radice e quella dell’elemento, e scegliere la proprietà CSS a cui applicare il valore (width, height, margin, padding, font-size, top…). Lo strumento ti mostra il risultato calcolato in pixel.
calc() si può anche annidare e combinare con le variabili CSS, per esempio calc(var(--sidebar) + 2rem), così una sola variabile governa più misure del layout. Il generatore ti aiuta a verificare la parte di calcolo, mentre le variabili restano libere di cambiare nel tuo foglio di stile.
Ci sono preset per i casi più comuni: larghezza piena meno sidebar, colonna centrata, altezza piena meno header e padding fluido. Tutto avviene nel tuo browser e il generatore è gratuito, senza limiti.
Come costruire un’espressione calc()
- Parti da un preset o aggiungi il primo termine con valore e unità.
- Aggiungi altri termini collegandoli con +, -, * o /.
- Correggi eventuali errori segnalati dalla validazione.
- Imposta il contesto (larghezza del padre, viewport, font radice ed elemento) e la proprietà CSS per vedere il risultato in px.
- Copia l’espressione calc().
Esempi d’uso di calc()
- Contenuto a tutta larghezza meno una sidebar fissa.
- Sezioni alte quanto lo schermo meno l’header.
- Colonne centrate con margini calcolati.
- Padding fluidi che uniscono una base in rem e una parte in vw.
- Colonne di griglia che sottraggono il gap: calc((100% - 2rem) / 3).
- Posizionamenti con top o left relativi al centro meno metà elemento.
Le regole di calc() da ricordare
- + e - devono avere uno spazio prima e dopo: calc(100% - 20px) funziona, calc(100%-20px) no.
- * e / non richiedono spazi, ma conviene metterli per leggibilità.
- Nella moltiplicazione almeno uno dei due fattori deve essere un numero senza unità: calc(2 * 1rem), non calc(2rem * 1rem).
- Nella divisione il divisore deve essere un numero senza unità e diverso da zero: calc(100% / 3).
- Puoi sommare unità diverse (% + px, rem + vw): è proprio lo scopo di calc().
Domande Frequenti
È gratis?
Sì. Il generatore di calc() è gratuito e senza limiti.
Perché il mio calc() non funziona?
Le cause più comuni sono la mancanza di spazi attorno a + e - e le moltiplicazioni o divisioni tra due valori con unità. Il generatore segnala entrambi gli errori.
Come viene calcolato il risultato in pixel?
In base al contesto che imposti: larghezza del padre per le %, dimensioni del viewport per vw e vh, font radice per rem, font dell’elemento per em, e la proprietà CSS scelta.
Che differenza c’è tra calc() e clamp()?
calc() calcola un valore; clamp() limita un valore tra un minimo e un massimo. Spesso si usano insieme: il valore centrale di clamp() è di fatto un’espressione di calcolo.