Cómo hacer cálculos dinámicos con calc() en CSS
¿Qué es calc() y cómo se utiliza?
calc() se utiliza para combinar y calcular diferentes valores numéricos en CSS. Puedes realizar operaciones como suma (+), resta (-), multiplicación (*), y división (/). Es especialmente útil cuando necesitas ajustar tamaños o márgenes de manera dinámica, tomando en cuenta el tamaño de otros elementos o el contenedor padre.
Sintaxis básica:
.elemento {
width: calc(100% - 50px);
}
En el ejemplo anterior, el ancho de .elemento se calcula restando 50 píxeles del ancho total (100%) del contenedor, manteniendo un espacio proporcional sin necesidad de usar JavaScript.
Reglas y operadores en calc()
-
Suma (
+): Combina dos unidades.
height: calc(50px + 10%);-
Resta (
-): Resta un valor a otro.
margin-left: calc(20% - 15px);-
Multiplicación (
*): Solo se usa con números simples (sin unidades).
font-size: calc(1rem * 1.5); /* Equivale a 1.5rem */-
División (
/): Al igual que la multiplicación, se usa solo con números.
width: calc(100px / 2); /* Equivale a 50px */Reglas a considerar:
1. Deben dejarse espacios entre los operadores (+, -, *, /) y los valores.
2. Se pueden combinar diferentes unidades como px, %, em, vh, vw, etc.
3. Usar calc() en propiedades grid-template-columns o flex es común para crear distribuciones de elementos más complejas.
Ejemplos de uso con calc()
1. Ancho dinámico con márgenes:
.caja {
width: calc(100% - 20px);
margin: 10px;
}
El contenedor .caja se ajustará al 100% del ancho del contenedor padre, pero restando 20px para tener en cuenta los márgenes laterales.
2. Altura adaptable con barra de encabezado:
.contenido {
height: calc(100vh - 60px);
}
Si tienes un encabezado fijo de 60px, este ejemplo asegura que el contenedor .contenido ocupe el resto del viewport (100vh menos el espacio del encabezado).
3. Centrado vertical de un elemento:
.centrado {
position: absolute;
top: calc(50% - 100px);
height: 200px;
}Ajusta la posición superior para centrar verticalmente un contenedor de 200px de altura, restando la mitad para que quede perfectamente alineado.
4. Combinar unidades para un tamaño flexible:
.flexible {
padding: calc(1rem + 2%);
}
Combina rem y % para crear un relleno (padding) que se adapta tanto al tamaño de fuente como al tamaño del contenedor.
¿Cuándo usar calc() en CSS?
-
Para combinar unidades: cuando necesitas combinar diferentes tipos de unidades como
pxy%. - En diseños responsivos: para ajustar márgenes o tamaños según la resolución de pantalla.
- Para evitar el uso de JavaScript: en cálculos de diseño dinámico como centrar elementos o distribuir el espacio.
Referencia oficial
Para más detalles, consulta la documentación oficial de MDN sobre calc().
Jorge García
Fullstack developer