La fórmula
columna = (contenedor − 2·margen − (n − 1)·canal) ÷ n
De dónde sale
La cuenta que se hace mal siempre es la del canal: entre doce columnas hay once canales, no doce. Ese uno de más roba un canal entero al contenido y las columnas ya no cuadran con el contenedor, que es el fallo típico cuando una rejilla «no encaja» por unos píxeles. Un bloque que abarca varias columnas se lleva además los canales que hay entre ellas, y por eso media rejilla no es la mitad del ancho de una columna por seis.
Cómo calcularlo a mano
- Resta el margen de los dos lados para tener el ancho útil
- Resta los canales: uno menos que columnas
- Divide lo que queda entre el número de columnas
- Un bloque de k columnas mide k anchos más k − 1 canales
Lo que conviene saber
Con doce columnas y 24 px de canal, los canales se llevan 264 px de un contenedor de 1.200: un 22 % del ancho es aire, y eso es antes de contar el margen. Conviene saberlo al elegir el canal, porque en pantallas pequeñas ese porcentaje se dispara y la rejilla se vuelve inservible; por eso los marcos de trabajo lo reducen por debajo de cierto ancho. Los puntos de ruptura que se listan son los de una versión concreta de cada marco —cambian con las versiones mayores— y son convenciones, no medidas de dispositivos: un teléfono actual apaisado ya pasa del primero.