Sistemas de retícula: guía para diseñadores

Los sistemas de retícula son la parte del diseño que más trabaja y menos crédito recibe. Todo producto que respetas tiene una, todo producto por el que haces scroll sin mirar no la tiene. La retícula no es decoración. Es el contrato que mantiene unidas la tipografía, la jerarquía y el ritmo para que el usuario pueda leer la página de un vistazo en lugar de descifrarla.

La escuela suiza lo demostró en papel hace sesenta años. Müller-Brockmann, Hofmann, Ruder, toda una generación de diseñadores que trataron la retícula como una herramienta de pensamiento, no como un atajo de maquetación. La lección envejeció mejor que casi cualquier otra pieza de teoría del diseño. Toda retícula de producto moderna, de Linear a Stripe pasando por el New York Times, desciende de la misma idea. Esta es la referencia de trabajo sobre la retícula en 2026.

Müller-Brockmann dio a la retícula moderna su gramática

El libro de Josef Müller-Brockmann de 1981, "Grid Systems in Graphic Design", sigue siendo la columna vertebral de la disciplina. Antes de ese libro, las retículas existían pero el vocabulario no. Después, los diseñadores tuvieron un lenguaje común para columnas, medianiles, márgenes y módulos que viajó entre estudios, escuelas y décadas.

La escuela suiza trató la retícula como un motor de restricciones. Elige un sistema, mantenlo y deja que la variación venga del contenido, no de la improvisación. Los carteles de Müller-Brockmann para la Tonhalle de Zúrich parecen capturas de UI de producto en 2026 porque funcionan con la misma lógica.

Tipografía fuerte sobre una retícula fija. El espacio en blanco como elemento estructural, no como espacio sobrante. La misma lógica aparece hoy en piezas como por qué todos los SaaS se ven iguales en 2026, donde la homogeneidad es la retícula ganando, y luego perdiendo su filo.

La web heredó esta gramática despacio. CSS nos dio floats, luego Flexbox y por fin CSS Grid. Cada paso cerró la brecha entre lo que los diseñadores de imprenta podían hacer en 1961 y lo que los desarrolladores front-end podían hacer en un navegador.

El vocabulario no cambió. Las columnas siguen siendo columnas. Las herramientas simplemente se pusieron al día.

Por qué funcionan las retículas, en un párrafo

Una retícula funciona porque le quita mil pequeñas decisiones al diseñador y se las devuelve al usuario en forma de previsibilidad. El ojo aprende el ritmo en el primer segundo de una página y lo usa para navegar todo lo que viene después.

Sin retícula, cada decisión de maquetación es nueva. Dónde va el título, dónde termina la imagen, qué ancho tiene el cuerpo, cómo se relaciona la barra lateral con la columna principal. Con retícula, esas respuestas ya están decididas.

El diseñador dedica su atención a la jerarquía y al contenido en lugar de volver a medir cada bloque. El usuario dedica su atención al mensaje en lugar de descifrar la estructura. Ese es todo el trato.

Los cinco tipos de retícula, en un solo lugar

La mayoría de los equipos tratan "la retícula" como una sola decisión. Son cinco. Cada una resuelve un problema de maquetación distinto y falla por una razón distinta. Elige mal y la página te pelea para siempre.

Esta tabla es el marcador. La mayoría de los desacuerdos sobre maquetación terminan en el momento en que el equipo se pone de acuerdo sobre cuál de estas cinco está usando.

La retícula de columnas es el caballo de batalla

Las retículas de columnas son la opción por defecto para casi todo lo que publicas en la web. Columnas verticales, medianiles fijos, márgenes opcionales. El contenido fluye por las columnas, los bloques de maquetación abarcan una o más de ellas y el ritmo lo marca en cuántas columnas se divide el lienzo.

Stripe usa una retícula de 12 columnas en toda su superficie de marketing. El shell de la app de Linear se construye sobre una retícula de columnas que se ajusta a un único raíl en móvil y se expande a barra lateral más columna principal en escritorio. Las páginas de marketing de Vercel usan una retícula de 12 columnas con espacio negativo deliberado; las columnas se ven si entrecierras los ojos ante la matriz de precios del dashboard o la maquetación del log de despliegues. La misma retícula que movía carteles en 1961 mueve sitios de marketing en 2026, solo que con media queries debajo.

Sáltate la retícula de columnas solo cuando la maquetación sea fundamentalmente no rectangular, lo que en la web casi nunca ocurre. El desglose del stack de sitio de marketing 2026 cubre las elecciones de framework que se apoyan sobre esta retícula.

La retícula modular es para la densidad editorial

Una retícula modular divide el lienzo en celdas en ambas direcciones, columnas y filas. Parece una hoja de papel milimetrado y se comporta como tal. Los bloques se ajustan a los límites de las celdas y la densidad se convierte en una palanca de diseño en lugar de un accidente.

La home del New York Times es la retícula modular canónica en la web. Titulares, fotos, resúmenes y anuncios se sitúan en celdas con anchos y altos consistentes, aunque la composición visible parezca variada. Bloomberg Terminal lleva la retícula modular al extremo, con una densidad de información que colapsaría sin una disciplina estricta de celdas. La vista de galería de Notion ofrece una retícula modular más suave, con tarjetas que se ajustan a un ancho de celda fijo mientras el contenido se adapta dentro.

Usa una retícula modular cuando la página tenga muchas unidades pequeñas y comparables que deban leerse como un sistema. Evítala cuando el contenido sean uno o dos bloques grandes, donde una retícula de columnas hace el mismo trabajo con menos ceremonia. Una retícula modular con dos tarjetas es una retícula de columnas disfrazada.

La retícula de línea base es el motor del ritmo

Una retícula de línea base es una retícula horizontal que controla el ritmo vertical. Cada línea de texto se apoya en una regla de línea base, cada título aterriza en un múltiplo de esa regla y la página se lee con una cadencia musical silenciosa que el usuario siente pero nunca nombra.

Las páginas de marketing de Apple usan una retícula de línea base estricta. Abre cualquier página de producto y mira cómo el titular, el subtítulo, la imagen y el cuerpo comparten un ritmo vertical común. Medium aplica alineación de línea base en su plantilla de formato largo, por eso la lectura resulta fluida incluso en un ensayo de 4000 palabras. Stripe Press, el brazo editorial, usa ritmo de línea base en cada página que imprime y en cada página que publica en la web.

Las matemáticas web son simples. Elige una unidad base, normalmente 8 píxeles. Fija el interlineado del cuerpo en un múltiplo, normalmente 24 píxeles, que es 1,5 de un texto de cuerpo de 16 píxeles.

Los títulos también caen en múltiplos, así que un H1 de 48 píxeles con interlineado de 56 sigue ajustándose al mismo ritmo. Toda la página zumba a un solo compás.

La retícula jerárquica es para el orden de lectura

Una retícula jerárquica es una retícula a medida construida alrededor de la prioridad intrínseca del contenido. En lugar de partir de columnas y filas, partes de qué debe leerse primero, segundo, tercero. La maquetación se ajusta a esas decisiones, no a una plantilla genérica.

Las páginas de lanzamiento de producto de Apple son retículas jerárquicas en estado salvaje. El elemento hero recibe un espacio desproporcionado, el contenido secundario se agrupa en clústeres compactos y el terciario vive en una columna más estrecha hacia el final. Los grandes reportajes del New York Times, esas piezas multimedia de scroll largo, son retículas jerárquicas diseñadas escena por escena. La home de Anthropic usa una retícula jerárquica donde una sola afirmación domina y todo lo demás tiene el tamaño justo para apoyarla.

Las retículas jerárquicas son el tipo que exige más criterio editorial. Fallan cuando los diseñadores las usan como excusa para saltarse la disciplina de una retícula de columnas o modular. Una retícula jerárquica no es "sin retícula". Es una retícula donde las prioridades fijan la geometría.

Si tu jerarquía está mal, la retícula está mal. La lógica más profunda de la prioridad está en diseño de jerarquía visual.

La retícula de manuscrito es para formato largo

Una retícula de manuscrito es una sola columna. Esa es toda la retícula. Un único bloque de texto que baja por la página con márgenes pensados, una medida deliberada y nada más compitiendo por el ojo.

Los libros de Stripe Press son retículas de manuscrito en papel. Las páginas de docs de Notion son retículas de manuscrito en el navegador. La vista de lectura de Substack, los long-reads de Apple Newsroom, las piezas de la Magazine del New York Times en modo de una columna, todos usan la misma retícula. El libro lleva cinco siglos sabiendo cómo entregar lectura larga. La web lo alcanzó en el momento en que dejamos de intentar poner una barra lateral junto a un ensayo de 4000 palabras.

La restricción es la medida, la longitud de línea. Apunta a entre 65 y 75 caracteres. Más ancho y el ojo pierde la línea al volver. Más estrecho y el ritmo se vuelve entrecortado.

La otra restricción es el margen. Los márgenes laterales generosos no son espacio desperdiciado, son el marco que deja descansar el ojo del lector. La entrada del glosario sobre espacio en blanco explica por qué esos márgenes trabajan de verdad.

El sistema de 12 columnas mueve la web moderna

La retícula de 12 columnas es la opción por defecto porque 12 es el número pequeño más divisible. Se divide limpiamente en 1, 2, 3, 4, 6 y 12. Eso cubre casi todos los patrones de maquetación que un sitio de marketing o una UI de producto necesitará, sin recurrir a fracciones.

Bootstrap codificó la retícula de 12 columnas para la web en 2011 y nunca tuvo que disculparse por la elección. Las utilidades de grid de Tailwind traen 12 columnas por defecto. La retícula responsive de Material Design, la de Carbon Design, Polaris de Shopify, todas de 12 columnas. La elección no es casualidad, son las matemáticas.

Esta es la guía de campo de 12 columnas que la mayoría de los equipos usa o reinventa mal:

• 12 hero a ancho completo, banner, footer, contenido de borde a borde
• 8 + 4 contenido principal con barra lateral, el shell canónico de app de producto
• 6 + 6 bloques de contenido a dos columnas, filas de características de marketing, secciones de comparación
• 4 + 4 + 4 tarjetas a tres, niveles de precios, retículas de características a tres columnas
• 3 + 3 + 3 + 3 logos a cuatro, retículas de equipo, galerías de imágenes
• 9 + 3 contenido con columna fina de metadatos, común en maquetaciones editoriales
• 2 + 8 + 2 contenido centrado con aire alrededor, usado en páginas de detalle de marketing

Fija estos patrones pronto y el equipo deja de debatir la maquetación en las revisiones de diseño. El patrón elige los spans, los spans eligen las matemáticas, las matemáticas publican la página. El argumento que sigue en no necesitas un sistema de diseño es en parte que una retícula sólida hace casi todo lo que un sistema de diseño dice hacer.

Ritmo de línea base en pantallas, no solo en papel

La alineación de línea base es la parte de la teoría de retículas que la mayoría de los equipos se salta en la web porque el navegador no la impone. Sáltatela y la página se siente nerviosa por razones que el usuario no sabe nombrar. Mantenla y la página se siente como un producto terminado.

El truco es pensar en unidades verticales, no en píxeles. Elige una base de 8 píxeles. Todo padding, margin, interlineado y altura de componente pasa a ser múltiplo de 8.

El cuerpo a 16 píxeles con interlineado de 24 encaja en el ritmo. H1 a 48 píxeles con interlineado de 56 encaja. El padding de tarjeta a 24 píxeles encaja. El espaciado de sección a 96 píxeles encaja. Toda la página se convierte en un único instrumento afinado a una sola nota, y el ojo puede recorrerla sin un solo tropiezo.

Linear aplica ritmo de línea base en la lista de issues. Notion lo aplica en el lector de docs. El producto Slides de Figma mantiene el ritmo tanto en las miniaturas de diapositivas como en el lienzo del editor. Los equipos que mantienen el ritmo suelen ser los que tratan la tipografía como un sistema, no como una hoja de estilos con parches.

Retículas responsive sin pánico

Una retícula responsive es la misma retícula funcionando a distintos anchos. No es un diseño distinto en cada breakpoint, es la misma composición colapsando con inteligencia a medida que el viewport se encoge.

El enfoque estándar es una retícula de 12 columnas en escritorio, 8 en tablet y 4 en móvil. Una maquetación 4 + 8 en escritorio pasa a 4 + 4 en tablet y a una sola columna en móvil. Una maquetación a cuatro de 3 + 3 + 3 + 3 pasa a 4 + 4 (dos filas de dos) en tablet y a 4 + 4 + 4 + 4 (cuatro apilados) en móvil. Las matemáticas son consistentes porque el número de columnas baja en fracciones limpias.

El sitio de Stripe es la retícula responsive de manual en producción. Las páginas de marketing de Linear se reorganizan a través de tres breakpoints sin una sola maquetación que se sienta apretada. La matriz de precios de Vercel se reorganiza colapsando la comparación en paralelo en un acordeón apilado, que es el truco responsive que la mayoría de los equipos nunca descubre: "responsive" a veces significa "cambia el componente, no las columnas". El problema de la página de precios cubre esa decisión en detalle.

El error es diseñar móvil y escritorio como dos maquetaciones sin relación. Las composiciones divergen, la marca se lee distinta en teléfono y portátil, y el equipo acaba manteniendo dos productos. Diseña primero la retícula y luego los breakpoints como colapsos de esa retícula. La entrada del glosario sobre sección hero cubre la parte de la retícula que los usuarios ven primero en cada breakpoint.

La era de CSS Grid: las herramientas de calidad de imprenta por fin llegaron

CSS Grid es la primera vez que el navegador tuvo una primitiva de maquetación a la altura de lo que los diseñadores de imprenta podían hacer en 1961. Antes de CSS Grid, los diseñadores web tenían floats, Flexbox y mucha paciencia. Ahora tenemos líneas de retícula reales, áreas con nombre, control de gap y la capacidad de maquetar una página como Müller-Brockmann habría maquetado un cartel.

El cambio importa porque lo que antes era una decisión de build (qué retícula de qué framework uso) ahora es una primitiva de maquetación integrada en el navegador. display: grid más grid-template-columns: repeat(12, 1fr) más gap: 24px es una retícula de 12 columnas. Sin framework. Sin clases de utilidad. Solo CSS haciendo lo que CSS debió hacer hace una década.

Las utilidades de grid de Tailwind son ahora azúcar fino sobre CSS Grid. La retícula de Bootstrap es sobre todo una capa de compatibilidad para un problema que ya no existe. Los equipos que más sacan de CSS Grid lo tratan como una herramienta de diseño, no como un plan B de Flexbox.

El editor de Linear usa CSS Grid para la maquetación del panel de issues. El editor web de Figma lo usa para el chrome del lienzo. Vercel lo usa en la mayor parte del sitio de marketing. La herramienta está en el kit, la pregunta es si el sistema de diseño la usa o está ejecutando patrones de 2018 sobre infraestructura de 2026.

Retículas de producto reales que vale la pena estudiar

La forma más rápida de interiorizar los sistemas de retícula es inspeccionar los productos que los hacen bien. Cinco que merecen una mirada larga.

Linear usa una retícula de columnas ajustada en el shell de la app, una de 12 columnas en el sitio de marketing y un ritmo de línea base en ambos. La lista de issues, la vista de proyecto, el panel de docs, todo se ajusta a la misma retícula vertical y horizontal. Es la implementación de retícula de columnas más limpia en UI de producto ahora mismo.

Vercel usa una retícula de 12 columnas con espacio negativo intencional. Las páginas de marketing respiran, el dashboard usa una retícula modular más densa y la vista de despliegue, tratada en el estado de carga es el producto, usa una retícula jerárquica donde el log de build domina y todo lo demás le deja sitio.

Stripe es la retícula canónica de 12 columnas en la superficie de marketing y una retícula modular en el dashboard. Las tarjetas del dashboard se ajustan a anchos consistentes, los bloques de métricas comparten alturas y todo el producto se lee como una sola composición a lo largo de más de treinta pantallas. El desglose del anti-dashboard cubre la filosofía que esa retícula implementa.

Apple usa retículas jerárquicas en páginas de producto, ritmo de línea base en todas partes y una retícula modular en la App Store y el Newsroom. La disciplina de retícula de Apple es lo más cercano en la web a la imprenta de la escuela suiza, y la mayoría de los equipos de producto subestiman cuánto de la impresión de marca viene solo de la retícula.

Retículas editoriales: NYT, Figma y Anthropic

The New York Times usa una retícula modular en la home, una jerárquica en los grandes reportajes y una de manuscrito en los long-reads. La misma publicación usa tres retículas a propósito, cambiando entre ellas según la tarea editorial. Esa es la lección: el tipo de retícula es una decisión de diseño por superficie, no un ajuste global.

Figma usa una retícula de columnas en el explorador de archivos, una modular en la biblioteca de equipo y una retícula propia dentro del lienzo. Notion ofrece una retícula de manuscrito para docs y una modular para bases de datos. Loops y Resend, ambos productos más nuevos, publican retículas de marketing limpias de 12 columnas y retículas de columnas más ajustadas en la app. El sitio de Anthropic usa una retícula jerárquica donde una sola afirmación domina cada sección, modelada más sobre maquetaciones editoriales que sobre UI de producto. La pieza sobre onboarding sin onboarding muestra cómo la disciplina de retícula llega hasta los flujos de primer uso, que a menudo se tratan como maquetaciones únicas.

Cuándo romper la retícula (a propósito)

Romper la retícula solo funciona cuando la retícula es tan visible que la ruptura se lee como una decisión deliberada. Sin una retícula detrás, el elemento roto es solo una cosa desalineada en una página.

La página de producto de Apple que deja que una imagen hero sobresalga del margen está rompiendo una retícula que se mantiene estricta en todo lo demás. El reportaje del NYT donde una fotografía se expande a sangre completa a mitad del ensayo rompe una retícula que corre con módulos disciplinados arriba y abajo. La home de Anthropic deja ocasionalmente que una sola cita se salga del eje al doble de su tamaño esperado, y el movimiento funciona porque todo lo que la rodea está abotonado.

La regla es una ruptura por superficie. Dos rupturas se leen como ausencia de retícula. La ruptura debe ser el momento más recordado de la página. Si no puedes señalar la retícula que el elemento está rompiendo, no estás rompiendo una retícula, estás decorando una maquetación sin estructura. La entrada del glosario sobre wireframe cubre la decisión temprana de a qué retícula te comprometes.

La disciplina del panel de ajustes en el problema de la página de ajustes es una lección relacionada. Las páginas de ajustes suelen ser donde la disciplina de retícula colapsa, porque cada ajuste se siente lo bastante distinto como para merecer otra maquetación. No lo merece. Mantén la retícula, deja que el contenido varíe dentro de ella.

La retícula es la marca, aunque nadie la señale

Si quitaras los colores, la tipografía y las imágenes de cualquier producto mencionado en este artículo, las retículas seguirían siendo reconocibles. La retícula de Linear seguiría sintiéndose como Linear. La de Stripe seguiría sintiéndose como Stripe. La retícula es el artefacto de marca más profundo que entrega un producto, porque es el que el usuario siente sin verlo nunca de forma consciente.

Elige un tipo de retícula, elige un número de columnas, elige una unidad de línea base. Mantenlos en cada superficie durante un año y la marca empezará a emerger de la estructura, no del tratamiento superficial. Ese es todo el secreto que enseñó la escuela suiza y que la mayoría de los equipos de producto siguen reaprendiendo. La retícula hace el trabajo. Lo demás es decoración que triunfa o fracasa según si la retícula estaba ahí para sostenerla.

FAQ

¿Cuál es la diferencia entre una retícula de columnas y una modular?

Una retícula de columnas divide el lienzo solo en columnas verticales, así que los bloques abarcan una o más columnas y el ritmo es horizontal. Una retícula modular divide el lienzo en celdas en ambas direcciones, columnas y filas, así que los bloques se ajustan a celdas y la densidad se vuelve una propiedad diseñada. Las retículas de columnas resuelven sitios de marketing y la mayoría de los shells de apps. Las modulares resuelven dashboards, maquetaciones editoriales y cualquier UI donde muchas unidades pequeñas y comparables deban leerse como un sistema.

¿Por qué la retícula de 12 columnas es el estándar?

12 es el número pequeño más divisible. Se divide limpiamente en 1, 2, 3, 4, 6 y 12, lo que cubre casi todos los patrones de maquetación (ancho completo, mitades, tercios, cuartos, sextos) sin fracciones. Bootstrap la codificó en 2011, Tailwind la trae por defecto y todo sistema de diseño importante desde entonces ha igualado la elección porque las matemáticas son las matemáticas.

¿Sigo necesitando un framework CSS ahora que existe CSS Grid?

Para maquetación, no. display: grid con grid-template-columns: repeat(12, 1fr) y gap es una retícula de 12 columnas en tres líneas de CSS. Frameworks como Bootstrap y Tailwind aportan valor mediante convenciones de componentes, atajos de utilidades y consistencia de equipo, pero la primitiva de maquetación en sí ya es una función del navegador. Usa el framework si acelera a tu equipo. No lo uses porque crees que lo necesitas para las retículas.

FAQ: publicar y romper la retícula

¿Cómo mantengo el ritmo de línea base en un producto real?

Elige una unidad base, normalmente 8 píxeles. Haz que cada padding, margin, interlineado y dimensión de componente sea múltiplo de esa unidad. Texto de cuerpo a 16 píxeles con interlineado de 24.

Títulos a 32, 40, 48 o 56 con interlineados de 40, 48, 56 o 64. Espaciado de sección a 96 o 128. La disciplina es aburrida, el resultado es una página que se lee como un producto terminado en lugar de un borrador.

¿Cuándo debo romper la retícula?

Una vez por superficie, cuando la retícula sea tan visible que la ruptura se lea como deliberada. La ruptura debe ser el momento más recordado de la página. Si no puedes señalar la retícula que el elemento está rompiendo, la página aún no tiene retícula, tiene una maquetación. Arregla primero la retícula, rómpela después.

CTA

Si quieres un equipo que diseñe sistemas de retícula como la columna vertebral del producto en lugar de como una ocurrencia de última hora antes del lanzamiento, contrata a Brainy. Entregamos productos donde la retícula hace el trabajo, la marca se lee de un vistazo y el ritmo se mantiene en cada superficie. Müller-Brockmann lo habría aprobado. Tus usuarios también, aunque nunca sepan qué retícula están mirando.