Retícula y grid en diseño web: columnas, márgenes y ritmo que ordenan una página

Cuando un cliente me dice que su web «se ve desordenada» pero no sabe explicar por qué, casi siempre el problema está en algo que nadie ve: la retícula. Los textos empiezan cada uno a una distancia distinta del borde, las fotos tienen anchos que no se relacionan entre sí, los bloques se separan con espacios que parecen elegidos a ojo. Ninguna de esas cosas, por separado, llama la atención. Juntas producen esa sensación difusa de que algo no termina de encajar.

La retícula es el esqueleto de una página. No se ve, pero se percibe. Es lo que hace que una web con mucho contenido parezca tranquila y que una web con muy poco parezca intencionada. En el estudio la definimos antes de dibujar el primer componente, igual que en un libro se decide la caja de texto antes de componer la primera página.

Esta guía es práctica: qué es una retícula, qué valores funcionan en cada pantalla, cómo trabajar el ritmo vertical y cómo llevarlo todo a CSS Grid.

01Qué es una retícula y de dónde viene

Una retícula, o grid, es un sistema de líneas guía que divide el espacio de la página en columnas (y a veces en filas) para colocar los elementos de forma coherente. Viene del diseño editorial: Josef Müller-Brockmann la sistematizó en Grid Systems in Graphic Design (1981), y antes Jan Tschichold y la tipografía suiza ya la usaban para ordenar carteles y libros. Massimo Vignelli resumía su valor diciendo que la retícula era la ropa interior del diseño: se lleva, pero no se enseña.

En la web la idea es la misma, con una diferencia importante: la página cambia de ancho. Una retícula web tiene que funcionar en un móvil de 360 px y en un monitor de 2.560 px, así que se piensa como un sistema que se adapta, más que como una plantilla fija.

Las piezas de una retícula web

• →Columnas: las franjas verticales donde se coloca el contenido. Un bloque ocupa una, varias o todas.
• →Medianiles (gutters): el espacio entre columnas. Mantiene separados los contenidos de columnas contiguas.
• →Márgenes: el espacio entre la retícula y el borde de la ventana.
• →Contenedor: el ancho máximo que alcanza la retícula en pantallas grandes, normalmente centrado.
• →Ritmo vertical: la escala de espacios que separa bloques y elementos de arriba abajo.

02Cuántas columnas usar y por qué el 12 es tan popular

La retícula de 12 columnas es el estándar de facto en web, y tiene una razón matemática: 12 se divide entre 2, 3, 4 y 6. Con ella puedes componer una sección a dos columnas, otra a tres, otra con un texto de 8 columnas y una imagen de 4, sin cambiar de sistema. Bootstrap la popularizó y Material Design la recoge para escritorio.

Eso no la convierte en la única opción. Estas son las que más usamos y cuándo:

La pregunta que conviene hacerse es qué combinaciones vas a necesitar. Si tu web va a tener tarjetas en filas de tres y de cuatro, necesitas una retícula divisible entre 3 y entre 4. Si todo va a ser texto centrado con alguna imagen, quizá baste con 6.

03Valores que funcionan: columnas, medianiles y márgenes por pantalla

La retícula cambia con el ancho de pantalla. En la práctica se define una configuración por cada tramo de tamaño. Estos son los valores de partida que usamos en el estudio, alineados con un sistema de espaciado de 8 puntos (hablamos de él en la guía sobre el sistema de espaciado de 8 puntos):

Tres criterios que explican esos números:

1. 01El margen móvil de 16 px es el mínimo cómodo. Por debajo, el texto parece pegado al borde y los dedos tocan el canto de la pantalla al hacer scroll. Material Design usa 16 px en móvil, y es un buen suelo.
2. 02El medianil crece menos que el margen. Entre columnas basta con un espacio que separe; alrededor de la página hace falta más aire a medida que la pantalla crece.
3. 03El contenedor tiene un tope. En un monitor de 2.560 px, una retícula que ocupa todo el ancho convierte los párrafos en líneas interminables. Limitar el contenedor a 1.280–1.440 px y dejar que los márgenes absorban el resto mantiene la composición legible. Las imágenes y fondos, en cambio, pueden ir a sangre, de borde a borde.

04Ritmo vertical: la retícula también va de arriba abajo

La mayoría de explicaciones sobre retículas se quedan en las columnas. Pero buena parte de la sensación de orden viene de cómo se reparte el espacio en vertical: cuánto separa un titular de su párrafo, un bloque del siguiente, una sección de otra.

Lo que funciona es definir una escala de espacios cerrada y usar solo esos valores. Por ejemplo, sobre una base de 8 px:

• →4 y 8 px: dentro de un componente (icono y texto, etiqueta y campo).
• →16 y 24 px: entre elementos relacionados (titular y párrafo, párrafo y botón).
• →32 y 48 px: entre grupos dentro de una sección.
• →64, 96 y 128 px: entre secciones, según el tamaño de pantalla.

La regla de proximidad de la Gestalt lo explica: percibimos como relacionado lo que está cerca. Si el espacio entre un titular y su texto es menor que el espacio entre ese texto y la sección siguiente, el ojo agrupa bien sin que haga falta una sola línea divisoria. Sobre cómo ese aire comunica, en el espacio en blanco en diseño web hay más ejemplos.

¿Y la línea base?

En diseño editorial se usa una retícula de línea base: todas las líneas de texto se apoyan en un patrón horizontal común, de forma que las columnas contiguas quedan alineadas. En web es posible aproximarla haciendo que el interlineado de todos los textos sea múltiplo de 4 u 8 px, pero mantenerla al píxel con tipografías fluidas y contenidos editables es poco práctico. Nuestra recomendación es usar la escala de espacios con rigor y reservar la línea base estricta para piezas muy editoriales.

05Cómo llevar la retícula a CSS Grid

CSS Grid permite expresar la retícula directamente en el código. Este es un patrón que usamos a menudo: un contenedor con márgenes fluidos, columnas que cambian por tramo y bloques que se colocan indicando cuántas columnas ocupan.

:root {
  --cols: 4;
  --gutter: 16px;
  --margin: clamp(16px, 5vw, 48px);
  --container: 1360px;
}
@media (min-width: 600px) { :root { --cols: 8; --gutter: 24px; } }
@media (min-width: 1024px) { :root { --cols: 12; } }
@media (min-width: 1440px) { :root { --gutter: 32px; } }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.span-full { grid-column: 1 / -1; }
.texto { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .texto { grid-column: 3 / span 8; }
  .media-izq { grid-column: 1 / span 7; }
  .media-der { grid-column: 8 / -1; }
}

Algunos detalles que marcan la diferencia:

• →minmax(0, 1fr) en lugar de 1fr evita que un contenido largo (una URL, una tabla) ensanche una columna y descuadre toda la fila.
• →clamp() en el margen hace que crezca suavemente con la ventana en lugar de saltar de golpe en cada punto de corte.
• →subgrid, ya disponible en todos los navegadores principales, permite que los componentes hijos hereden las columnas del padre. Es ideal para que los títulos, textos y botones de varias tarjetas queden alineados entre sí aunque tengan longitudes distintas.

.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.tarjeta { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

Con esas dos líneas, el titular, el texto y el botón de cada tarjeta se alinean en filas comunes, y la fila de tarjetas parece compuesta a mano. Para profundizar en Grid, la documentación de MDN sobre CSS Grid Layout es la referencia más completa.

06Romper la retícula con intención

Una retícula bien aplicada da calma; aplicada con demasiada obediencia puede resultar previsible. Por eso muchas de las webs editoriales que más recordamos la rompen en momentos concretos: una fotografía que sangra hasta el borde, un titular enorme que ocupa diez columnas mientras el texto se queda en seis, una cita desplazada hacia el margen.

Lo que hace que esas rupturas funcionen es que el resto respeta la estructura. El ojo detecta la excepción porque ha aprendido la norma. En nuestros proyectos nos ponemos una pauta sencilla: una ruptura visible por pantalla, como mucho, y siempre al servicio del contenido más importante de esa sección.

07Cómo revisar la retícula de tu web en diez minutos

No hace falta ser diseñador para comprobar si una web tiene una estructura sólida. Prueba esto:

1. 01Abre la web en el ordenador y fíjate en el borde izquierdo de los textos al hacer scroll. ¿Empiezan casi siempre en las mismas dos o tres posiciones?
2. 02Mira los espacios entre secciones. ¿Se repiten o cada uno es distinto?
3. 03Estira y encoge la ventana del navegador. ¿Los bloques se reorganizan con lógica o aparecen saltos raros, cortes y huecos?
4. 04En el móvil, comprueba que hay al menos 16 px de margen a cada lado y que nada provoca scroll horizontal.
5. 05En una pantalla grande, comprueba que los párrafos tienen un ancho cómodo y que la composición no se estira hasta los bordes.
6. 06Si tienes filas de tarjetas, mira si títulos y botones están alineados entre sí.

Si la mayoría de respuestas son afirmativas, la web tiene un esqueleto sano. Si no, una revisión de la retícula suele ser de las mejoras con más efecto visual por menos esfuerzo, porque reordena sin cambiar la identidad. Los tramos de pantalla en los que conviene revisar todo esto los tratamos en diseño web responsive y breakpoints.

08Una estructura que se nota sin verse

La retícula es una de esas decisiones que nadie elogia y que todo el mundo percibe. Cuando está bien resuelta, los contenidos respiran, las fotos dialogan entre sí y la web transmite una calma que se asocia, sin pensarlo, con una marca cuidada.

En SIMA la definimos al principio de cada proyecto de diseño web y experiencia digital, junto con la tipografía y el espaciado, y la compartimos con desarrollo como parte del sistema. Si tu web necesita ese orden de fondo o estás empezando una nueva, escríbenos y vemos por dónde empezar.