Calc() per calcoli dinamici
La funzione calc() permette di eseguire calcoli matematici per definire valori CSS.
Sintassi
.sidebar {
width: calc(100% - 250px); /* Larghezza meno sidebar fissa */
}
.container {
padding: calc(1rem + 2vw); /* Combinare unità diverse */
}Operazioni supportate
+addizione-sottrazione*moltiplicazione/divisione
Esempi pratici
/* Centrare verticalmente */
.centered {
top: calc(50% - 100px); /* 50% meno metà altezza */
}
/* Colonne con gap */
.col-3 {
width: calc((100% - 40px) / 3); /* 3 colonne con 20px gap */
}