Rejillas de maquetación y breakpoints: la guía práctica

Una rejilla de maquetación es el contrato horizontal de la página: un número acordado de columnas por breakpoint, con medianiles fijos entre ellas y márgenes alrededor, contra el que se compone cada pantalla. La rejilla de 12 columnas para escritorio —8 en tablet, 4 en teléfono— es la convención de trabajo de la maquetación de interfaces moderna, y este hub reúne nuestras guías para usarla con el CSS de hoy; la orientación más rápida es la rejilla de tres breakpoints, en vivo.

La rejilla sobrevivió a los frameworks

Los frameworks de rejilla basados en clases murieron cuando llegó CSS Grid: ya nadie necesita la maquinaria de col-md-6. Lo que sobrevivió es la capa de diseño: los equipos siguen acordando columnas, medianiles y márgenes, porque las maquetaciones que construyen muchas personas a lo largo de muchos meses necesitan un esqueleto compartido para mantenerse relacionadas. Las guías de aquí tratan la rejilla como ese acuerdo, implementado en unas pocas líneas de CSS moderno en lugar de un framework. La razón intuitiva por la que el acuerdo sobrevive es que la alineación se lee como intención: los elementos que comparten bordes parecen deliberados, decenas de anchos ligeramente distintos parecen accidentales, y un conjunto de columnas compartido convierte lo primero en lo predeterminado en lugar de un acto de vigilancia. Qué es una rejilla de 12 columnas lo argumenta desde cero —por qué doce, qué te da su divisibilidad— y construir la rejilla en CSS puro muestra la implementación moderna: unas pocas custom properties y una regla display: grid donde antes estaba el framework.

Tres números por breakpoint

Cada nivel de la rejilla es columnas, medianil y margen, y la aritmética los une: los medianiles y márgenes fijos se restan del contenedor, las columnas se reparten el resto. Nuestras guías cubren las proporciones del trío, por qué el número de columnas baja en pantallas más pequeñas, dónde encajan realmente los breakpoints (el contenido, no los dispositivos) y el ancho de contenedor que mantiene el texto legible, con el razonamiento sobre la longitud de línea de nuestra guía de tipografía haciendo de nexo. 4, 8, 12: columnas por breakpoint explica por qué el número baja en pantallas más pequeñas —menos maquetaciones sensatas, no matemáticas distintas—; breakpoints: el contenido antes que los dispositivos defiende añadir un nivel donde la maquetación empieza a fallar en lugar de donde lo diga una tabla de dispositivos; elegir un ancho máximo de contenedor calcula el techo a partir de las propias columnas; y columnas fijas vs. fluidas resuelve qué se estira y qué se queda fijo entre niveles.

Componer sobre la rejilla

Una rejilla acordada solo se gana su lugar cuando el contenido aterriza en ella, y las maquetaciones reales rara vez llenan doce celdas iguales. Spans de columna y anidamiento cubre la mecánica de elementos que ocupan cuatro, seis u ocho columnas —y de rejillas dentro de rejillas, donde se cometen la mayoría de los errores de span—. Algunas secciones necesitan escapar del contenedor por completo, que es el problema del full-bleed: color de borde a borde detrás del contenido que aun así se alinea con las columnas. Del lado de las herramientas de diseño, rejillas de maquetación en Figma replica los mismos niveles, para que los mockups y el CSS midan contra un solo esqueleto en lugar de dos aproximaciones de él.

Una sola escala, la maquetación incluida

La misma escala que espacia la tipografía y los componentes puede escalonar las medidas de la rejilla: medianiles y márgenes como pasos de la misma escala de espaciado, los tokens de layout exportados junto al color y la tipografía. Las decisiones de rejilla dejan de ser un dialecto aparte, que es la misma historia de fuente única que se cuenta en design tokens, extendida al esqueleto de la página. Así es como Scale Composer trata la maquetación: breakpoints, columnas, medianiles y un ancho de contenedor global viven junto a las vistas de color y tipografía, escalonados por la única escala que gobierna las tres, y aterrizan en el mismo archivo de tokens al exportar.

Guías de este hub

• ¿Qué es una rejilla de 12 columnas?

  Una rejilla de 12 columnas divide la página en doce columnas iguales con medianiles fijos. Por qué gana el doce: mitades, tercios, cuartos y sextos caen todos en columnas enteras.

• 4, 8, 12: columnas por breakpoint

  Las columnas de una rejilla responsiva bajan de 12 a 8 a 4 a medida que las pantallas se estrechan, porque una rejilla solo guía cuando una columna tiene un tamaño usable — con las cuentas resueltas por nivel.

• Breakpoints: contenido antes que dispositivos

  Los breakpoints CSS van donde la maquetación falla —longitud de línea, barras laterales asfixiadas, tarjetas apretadas—, no en una tabla de dispositivos. Por qué los valores casi estándar siguen funcionando.

• Columnas fijas vs fluidas

  Rejilla fija vs fluida: la mayoría de las maquetaciones modernas mantienen fijos los medianiles y los márgenes mientras las columnas flexionan entre breakpoints — qué aporta cada modelo, con números reales.

• Cómo elegir el ancho máximo del contenedor

  El ancho máximo del contenedor, explicado: por qué las maquetaciones se topan cerca de los 1200px, la aritmética inversa a partir de una columna de texto legible y cuándo conviene una maquetación fluida.

• Configurar rejillas de maquetación en Figma

  Configura una rejilla de maquetación en Figma por breakpoint: columnas stretch con medianiles y márgenes fijos, guardadas como estilos de rejilla, con los números emparejados al código.

• Construir la rejilla en CSS puro

  Un sistema de rejilla CSS en unas veinte líneas: las custom properties llevan las decisiones de cada breakpoint, tres clases las consumen y los spans se recortan por nivel.

• Secciones a sangre dentro de un contenedor

  CSS a sangre sin salir del contenedor: cómo los heroes y las bandas de medios escapan del max-width mientras su contenido se mantiene en la rejilla — dos patrones modernos.

• Spans de columnas y anidamiento

  Cómo funciona el span de columnas en rejilla: la gramática del span, patrones de página como 8+4 y 4+4+4, cómo elegir spans según contenido y alineación, y cómo anidar rejillas de forma limpia.

Mueve la rejilla y observa la página

Las proporciones de la rejilla se aprenden más rápido con las teclas de flecha: recorre los medianiles y los márgenes por la escala —4, 8 y 12 columnas por breakpoint dentro de un contenedor global— y observa cómo la maquetación se aprieta y respira paso a paso. Diez segundos recorriendo explican la proporción del medianil mejor que cualquier diagrama.