4, 8, 12: columnas por breakpoint

Pon una rejilla de 12 columnas en un móvil de 375px y observa qué le pasa. Incluso con los márgenes reducidos a cero y los medianiles comprimidos a 8px, cada columna sale de (375 − 11 × 8) ÷ 12 ≈ 24px de ancho. Nada real cabe en una — ni un botón, ni un campo, ni una miniatura. Una tarjeta modesta de 300px ocupa diez de las doce columnas, así que cada elemento acaba eligiendo entre «casi todo» y «todo», los tramos intermedios quedan sin usar, y la rejilla sigue dibujando guías sin informar ninguna de las decisiones.

Por eso las rejillas responsivas reducen el número de columnas en lugar de encoger las columnas: 4 columnas en móviles, 8 en tabletas, 12 en escritorio, manteniendo el ancho de columna aproximadamente constante en los tres. El número es la palanca que se adapta; la unidad conserva un tamaño con sentido. Este artículo — parte de nuestra guía de la rejilla de maquetación — explica por qué funciona esa inversión, qué aspecto tienen los números reales por nivel, y cómo un mismo diseño se traduce entre ellos.

¿Por qué baja el número de columnas en lugar de encogerse las columnas?

Porque una rejilla solo guía mientras su unidad tiene un tamaño con sentido — un ancho que algo en la página podría tener de verdad. Cuando una columna mide ≈24px, mover un límite una columna no cambia casi nada, y ningún elemento real ocupa unas pocas columnas contables; la rejilla se ha convertido en decoración. En una rejilla de móvil de 4 columnas, el mismo viewport de 375px con medianiles y márgenes de 16px da columnas de (375 − 32 − 48) ÷ 4 ≈ 74px — y ahora los tramos se corresponden con las composiciones que un móvil usa de verdad: 4 es ancho completo, 2 es la mitad, 1 es una unidad de un cuarto de ancho para iconos y avatares. Cada tramo disponible vuelve a ser una elección real.

¿Por qué 4, 8 y 12 — y no otra escalera?

Cada número encaja con el vocabulario de composición de su pantalla. Un móvil compone en anchos completos, mitades y algún que otro cuarto — 4 columnas cubren exactamente eso. Una tableta añade disposiciones de dos elementos y barras laterales estrechas — 8 columnas aportan cuartos usables (tramos de 2) y divisiones con barra lateral como 5 + 3 y 6 + 2. Un escritorio necesita el vocabulario completo, tercios incluidos — que son 12.

La escalera también conserva la proporción entre niveles. Como 4 se duplica a 8, las mitades siguen siendo mitades (2 de 4, 4 de 8) y los cuartos siguen siendo cuartos (1 de 4, 2 de 8); 12 mantiene ambos (6 y 3) y añade los tercios. Una composición de tableta de 8 columnas de 6 + 2 escala a 9 + 3 en escritorio por proporción directa. Los diseños no se traducen entre niveles por casualidad — los números se eligen para que puedan hacerlo.

¿Qué cambia por breakpoint — y qué permanece constante?

Menos de lo que podrías esperar. Estos son los valores por defecto de la vista de rejilla de Scale Composer, con el total de la rejilla calculado como columnas × ancho de columna + (columnas − 1) × medianil + 2 × margen:

Los totales cuadran línea por línea: 4 × 66 + 3 × 16 + 2 × 16 = 344, justo dentro de la vista previa de 375px; 8 × 66 + 7 × 24 + 2 × 29 = 754 ≈ 768; y 12 × 66 + 11 × 24 + 2 × 66 = 1188 ≈ 1200.

Lee la tabla columna a columna y el reparto de tareas queda claro. Los medianiles y los márgenes suben de forma modesta (16 → 24, 16 → 29 → 66). El ancho de columna no se mueve en absoluto — 66px en todos los niveles, así que una unidad de una columna se siente igual en un móvil que en un escritorio. El número de columnas carga con toda la adaptación: 4, 8, 12.

Abre la rejilla de tres niveles en Scale Composer — la vista de rejilla mantiene un sistema de maquetación por breakpoint, cada uno con sus propias columnas, ancho de columna, medianil y margen, y las medidas recorren la escala compartida con las teclas de flecha.

¿Cómo se traduce un mismo diseño entre los niveles?

Los tramos de columna son decisiones por nivel, no valores escalados. Sigue una landing page con tres secciones a través de los tres niveles:

Fíjate en lo que fuerza la columna del medio. El ocho no tiene tercios, así que la fila de tarjetas no puede sobrevivir al viaje desde escritorio como una fila — las opciones honestas son dos en fila con la tercera cayendo debajo, o un apilado completo. Y la maquetación de artículo de 8 + 4 no se convierte en «5,3 + 2,7» en tableta; se convierte en una decisión distinta (contenido a ancho completo, barra lateral degradada). Un nivel con menos columnas no es un escritorio encogido — es un vocabulario más pequeño, y la maquetación se reformula en él.

En CSS esto es una declaración de grid-template-columns por nivel dentro de media queries — dónde deben situarse esos límites de nivel es una cuestión de contenido, no de modelos de dispositivo. La mecánica está documentada en la referencia CSS grid layout de MDN. Lo que el código no puede decidir por ti es la reformulación en sí: qué tramos recibe cada nivel es diseño, no aritmética.

Comprueba los totales en cada nivel

La tabla de arriba es más fácil de creer después de haberla roto. Carga los tres niveles y cambia una variable cada vez: baja el escritorio de 12 columnas a 8 y observa el ancho de columna que te devuelve la aritmética sobrante; sube un medianil un escalón de la escala y observa cómo el total de la rejilla se aleja de su breakpoint. Los totales se recalculan en vivo, así que cada configuración muestra su propia aritmética — comprueba tú mismo los totales por nivel en Scale Composer.