CSS | Es posible realizar cálculos entre píxels y porcentajes y mezclar peras con manzanas con calc()

Dado el elevado número de veces que me han preguntado algo parecido, voy a escribir este sencillo artículo sobre la función calc() de CSS que todo maquetador web debería conocer.

Escenario

Algo con lo que deberemos lidiar n-mil veces sobre todo cuando estamos maquetando sitios web adaptativos o responsivos, es que tendremos elementos con unas medidas específicas que tenemos que encajar con otros que tienen medidas relativas especificadas con porcentajes y… ahí viene la gran duda, ¿cómo lo solucionamos?

Bajando a la mina

Una posible solución es bajar a la mina y empezar a escribir CSS para controlar al milímetro el comportamiento. Esto, aunque es posible, es muy engorroso y nos quedarán ficheros de estilos que no desearía que mantuviesen ni mis peores enemigos.

En el caso de diseños responsivos o adaptativos, podríamos solucionarlo también poniendo puntos de control con mediaqueries en decenas de resoluciones lo que nuevamente se convierte en un trabajo tedioso y con un resultado feo e imposible de mantener.

Usar calc()

Es aquí donde hace su aparición la función “calc”. Para los más avezados no será algo nuevo, pero para los rezagados o novatos sí que será un descubrimiento que les salvará la vida (admito donaciones xD)

Como indicaba en la escenificación del problema, es muy probable que nos encontremos en la situación de tener que mezclar medidas relativas con porcentajes y medidas. Como ejemplo muy simple, supongamos tener tres columnas, una con 200px de ancho y las otras dos con el mismo ancho, es decir, al 50% del espacio restante de los 200px que sean adaptativas.

El DOM podría ser el siguiente:

        <div id="site-container">
            <div id="column-1" class="column-fixed"></div>
            <div id="column-2" class="column-relative"></div>
            <div id="column-3" class="column-relative"></div>
        </div>

Y los estilos:

            #site-container {
                font-size: 0;
            }
            
            #site-container > div {
                display: inline-block;
                padding: 5px;
                height: 300px;
                box-sizing: border-box;
            }

            #column-1 {
                background: lightblue;
            }

            #column-2 {
                background: blueviolet;
            }

            #column-3 {
                background: #363636;
            }

            .column-fixed {
                width: 200px;
            }

            .column-relative {
                width: calc((100% - 200px) / 2);
            }

Como se puede observar, hay 3 columnas “inline-block” (nótese que el contenedor tiene font-size: 0; para evitar los márgenes que aplican los navegadores). La primera columna tiene un ancho de 200px y las restantes un valor calculado mediante calc((100% – 200px) / 2), lo que resultará en el 50% del espacio resultante de restar los 200px al ancho total.

El resultado sería el siguiente y nos permitiría mantener las columnas de ancho calculado con un valor dinámico en función del ancho disponible resultando en un diseño “adaptativo”.

Como veis, ha sido un tip sencillo que nos puede sacar de muchos apuros.

Enjoy coding!!