Hay una métrica que Google publica y que mide, literalmente, si tu layout se comporta bien: el CLS. Cuantifica cuánto se mueven los elementos de la página mientras el usuario intenta leerla o pulsar algo. Para considerarse correcto tiene que quedar en 0,1 o menos en el 75 % de las visitas reales.
Es un buen punto de partida, porque deja claro que el layout no es una cuestión de gusto. Es una decisión con consecuencias medibles en rendimiento, en conversión y, desde junio de 2025, también en cumplimiento legal.
Este artículo va de eso: la retícula con números concretos, cuándo usar Grid y cuándo Flexbox, cómo hacer un layout adaptable sin llenar el CSS de media queries, y qué exige la normativa española de accesibilidad a partir de ahora.
Qué es el diseño de layout
El diseño de layout es la disposición estructurada de los elementos de una interfaz —texto, imágenes, navegación, controles— sobre un sistema de retícula y espaciado, de forma que la organización visual comunique la jerarquía del contenido y permita recorrerlo sin esfuerzo.
En España al oficio de llevar ese diseño a código se le llama maquetación web, y conviene usar los dos términos porque no son exactamente lo mismo: el layout es la decisión de estructura y la maquetación es su implementación en HTML y CSS. Quien diseña decide que la barra lateral ocupe un tercio; quien maqueta decide si eso se resuelve con grid-template-columns o con Flexbox.
Un layout hace tres cosas a la vez. Ordena la información por importancia, agrupa lo que está relacionado y guía el recorrido de la mirada. Cuando falla alguna de las tres, el síntoma no es que la web se vea fea: es que el usuario no encuentra lo que busca, que es un problema de usabilidad web con impacto directo en negocio.
La retícula: los números que casi nadie da
Decir "usa una cuadrícula" no sirve de nada sin cifras. Estas son las tres que estructuran cualquier maquetación seria.
Decisión | Valor habitual | Por qué ese |
|---|---|---|
Columnas de la retícula | 12 en escritorio, 8 en tableta, 4 en móvil | 12 es divisible entre 2, 3, 4 y 6, así que permite mitades, tercios y cuartos sin decimales |
Escala de espaciado | Múltiplos de 8 px (4 px para ajustes finos) | Encaja con las densidades de pantalla más comunes y elimina las decisiones arbitrarias de márgenes |
Medida de línea | 45-75 caracteres por línea | Por debajo, el ojo salta de línea demasiado a menudo; por encima, cuesta encontrar el inicio de la siguiente |
Son convenciones de trabajo consolidadas, no reglas absolutas. El rango de 45-75 caracteres procede de la tipografía clásica: Robert Bringhurst lo fija en 45-75 con un óptimo de 66 en The Elements of Typographic Style. Lo importante es que existan y se respeten en todo el sitio.
La medida de línea es la que más se ignora y la que más daño hace. En una pantalla ancha, un párrafo a todo lo ancho del viewport puede pasar de 150 caracteres por línea y volverse ilegible. En CSS se resuelve con una sola declaración:
Un apunte por si lo ajustas a ojo: en una tipografía proporcional el "0" es más ancho que la media, así que 65ch suele renderizar entre 75 y 85 caracteres reales. Si quieres quedarte dentro del rango de arriba, baja a 55ch o 60ch.
Grid o Flexbox: la decisión que ordena todo lo demás
Es la pregunta que más se repite y tiene una respuesta corta: Grid para la estructura de la página en dos dimensiones, Flexbox para distribuir elementos en una sola.
CSS Grid | Flexbox | |
|---|---|---|
Dimensiones | Dos: filas y columnas a la vez | Una: fila o columna |
Control | El contenedor define dónde va cada cosa | Los hijos se reparten el espacio disponible |
Encaja bien en | Estructura de página, galerías, dashboards, tablas de precios | Barras de navegación, grupos de botones, cabeceras de tarjeta, chips |
Cuándo elegirlo | Sabes de antemano la forma de la cuadrícula | Quieres que el contenido decida cómo se reparte |
No compiten, y así lo plantea la propia documentación de MDN: en una web real conviven, con Grid montando el esqueleto y Flexbox resolviendo el interior de cada bloque.
La forma más legible de definir la estructura con Grid es grid-template-areas, porque el CSS acaba pareciéndose a un dibujo de la página:
Si en el futuro hay que mover la barra lateral al otro lado, basta con invertir las áreas y las columnas: "principal lateral" y grid-template-columns: 3fr 1fr. Dos líneas, y ningún cambio en el HTML. Eso sí, ten presente el aviso de la sección de accesibilidad: reordenar visualmente no reordena el DOM.
Layout adaptable sin llenar el CSS de media queries
El artículo anterior se limitaba a decir "que sea responsive". La forma moderna de conseguirlo es dejar que el navegador calcule, en lugar de escribir puntos de ruptura para cada tamaño.
Rejillas que se reorganizan solas. Esta declaración reparte el espacio en columnas de 260 px como mínimo, sin una sola media query:
La diferencia entre auto-fit y auto-fill confunde a casi todo el mundo: auto-fill crea todas las columnas que quepan aunque queden vacías, y auto-fit colapsa las vacías para que los elementos existentes se repartan el ancho. Con tres tarjetas en una pantalla muy ancha, auto-fill las deja pequeñas a la izquierda y auto-fit las estira. Casi siempre quieres auto-fit.
Tipografía que escala con el viewport. clamp() recibe un mínimo, un valor preferido y un máximo:
Fíjate en que el valor intermedio suma un rem a los vw. No es decorativo: si escribes solo 2.5vw, el tamaño deja de responder al zoom del navegador y rompes el criterio 1.4.4 de las WCAG sobre redimensionado de texto. El componente en rem es lo que mantiene el texto ampliable.
Componentes que reaccionan a su contenedor, no a la pantalla. Es lo que resuelven las container queries, y cambia bastante la forma de trabajar: una misma tarjeta puede mostrarse en vertical dentro de una barra lateral estrecha y en horizontal en el cuerpo principal, sin saber nada del tamaño de la ventana.
Con una condición que se olvida siempre: .tarjeta tiene que estar dentro de .contenedor-tarjeta. Un elemento no puede consultarse a sí mismo, así que el contenedor consultado es siempre un ancestro.
Las media queries siguen haciendo falta para decisiones de página completa, como pasar de dos columnas a una. Para componentes, las container queries envejecen mucho mejor. Si trabajas con frameworks de utilidades como Tailwind CSS, el razonamiento es idéntico: cambia la sintaxis, no el criterio.
El patrón F no es un objetivo: es un síntoma
Aquí está la corrección más importante respecto a la versión anterior, que recomendaba "colocar elementos importantes a lo largo del patrón de lectura en F o en Z".
Está del revés. El patrón F lo documentó el Nielsen Norman Group con estudios de seguimiento ocular, y su lectura es que aparece cuando el diseño falla: surge ante muros de texto sin formato, cuando el contenido no ofrece suficiente valor y el usuario deja de leer para escanear. No es cómo la gente lee cuando el diseño funciona; es lo que hace cuando ha renunciado a leer.
La recomendación de la propia NN/g es la contraria a la del artículo original: romper el patrón F mediante jerarquía visual. En términos de layout, eso significa encabezados descriptivos que se puedan leer en diagonal, párrafos cortos, listas donde haya enumeraciones, negritas sobre las palabras que cargan el significado y elementos visuales que interrumpan el bloque de texto.
Diseñar para el patrón F es optimizar para el fracaso: aceptas que nadie va a leerte y colocas lo importante en la zona por la que pasa la mirada antes de rendirse.
Layout y SEO: CLS es la conexión real
La versión anterior decía que "los motores de búsqueda consideran la estructura de un sitio web". Es vago. La conexión concreta y medible entre maquetación y posicionamiento tiene nombre: Cumulative Layout Shift, una de las tres Core Web Vitals junto a LCP e INP.
CLS mide cuánto se desplazan los elementos visibles sin que el usuario lo haya provocado. La carga inicial es la parte más visible, pero la métrica se acumula durante toda la vida de la página, que es justo lo que hace tan caro un banner de cookies que aparece tarde. Los umbrales que publica Google, medidos sobre el percentil 75 de visitas reales:
CLS | Valoración |
|---|---|
0,1 o menos | Correcto |
Más de 0,1 y hasta 0,25 | Necesita mejorar |
Más de 0,25 | Deficiente |
Las tres causas más habituales según la documentación de web.dev, y cómo se resuelven desde el propio layout:
Imágenes sin dimensiones reservadas. Si el navegador no sabe cuánto va a ocupar una imagen, coloca el contenido y lo empuja cuando la imagen llega. Se corrige declarando el tamaño en el HTML o reservando la proporción en CSS:
La forma canónica es declarar las dimensiones reales en el HTML y dejar que el navegador calcule la proporción:
Y si necesitas forzar una proporción concreta, hazlo sobre una clase y nunca sobre el selector img, porque aplicarlo a todas las imágenes deforma logos, retratos e iconos:
Contenido inyectado por encima de lo ya visible. Banners de cookies, avisos y anuncios que se cargan tarde y desplazan todo hacia abajo. La solución de layout es reservarles el hueco desde el principio con un min-height, en lugar de dejar que lo abran al aparecer.
Fuentes web que cambian de métrica al cargar. Cuando la tipografía definitiva sustituye a la de respaldo y ocupa distinto, el texto se recompone. Se mitiga con font-display: optional, que evita el cambio a cambio de que en la primera visita la fuente pueda no llegar a mostrarse, o ajustando las métricas de la fuente de respaldo para que ocupe lo mismo. Si usas optional, precarga la fuente con <link rel="preload"> para que la segunda visita ya la tenga.
Ninguna de las tres es un problema de estética. Las tres se arreglan en la capa de maquetación, y se comprueban con herramientas de medición de rendimiento como las que repasamos en la guía de optimización con GTmetrix. Para el resto de la parte estructural, el artículo de SEO técnico cubre el marco general.
Accesibilidad: lo que desde junio de 2025 es obligatorio en España
Este apartado ha dejado de ser una buena práctica. La Ley 11/2023, que traspone la directiva europea conocida como European Accessibility Act, es aplicable desde el 28 de junio de 2025 y afecta a empresas privadas que prestan servicios digitales: comercio electrónico, banca, transporte de pasajeros o libros electrónicos, entre otros. Su régimen sancionador remite al texto refundido de la Ley General de derechos de las personas con discapacidad, cuya escala llega hasta el millón de euros en las infracciones muy graves. Hay excepciones para microempresas de servicios, así que conviene verificar el encaje concreto de cada caso.
Tres criterios de las WCAG 2.2 que se deciden directamente en el layout:
Reflow (criterio 1.4.10). El contenido debe poder leerse a un ancho equivalente a 320 píxeles CSS sin obligar a desplazarse en dos direcciones. En la práctica es lo que ocurre cuando alguien amplía la página al 400 %. Un layout construido con minmax() y unidades relativas lo cumple casi solo; uno con anchos fijos en píxeles, no.
Tamaño del área táctil (criterio 2.5.8, nuevo en WCAG 2.2). Los objetivos interactivos deben medir al menos 24×24 píxeles CSS, salvo excepciones. Afecta a botones pequeños, iconos de cerrar y enlaces apilados en menús.
Orden significativo y orden del foco (criterios 1.3.2 y 2.4.3). Este es el que más sorprende a quien empieza con Grid y Flexbox. Propiedades como order o grid-row cambian el orden visual, pero no el orden del DOM, que es el que siguen los lectores de pantalla y el tabulador del teclado. Un layout puede verse perfecto y leerse en un orden absurdo:
La regla práctica es sencilla: el orden del HTML debe ser el orden lógico de lectura, y las reordenaciones visuales deben limitarse a casos donde ambas secuencias sigan teniendo sentido. Ahí ayuda partir de una base semántica correcta, con las etiquetas de HTML5 que marcan cabecera, navegación, contenido principal y pie. Es la clase de detalle que separa a alguien que sabe HTML de alguien que sabe maquetar.
Preguntas frecuentes sobre el diseño de layout
¿Grid o Flexbox?
Grid para la estructura de la página, porque controla filas y columnas a la vez y el contenedor decide dónde va cada bloque. Flexbox para repartir elementos en un solo eje, como una barra de navegación o un grupo de botones. En una web real se usan los dos: Grid monta el esqueleto y Flexbox resuelve el interior de cada pieza.
¿Sigue teniendo sentido la retícula de 12 columnas?
Sí, aunque por un motivo distinto al original. Nació con los frameworks basados en flotados, pero se mantiene porque 12 es divisible entre 2, 3, 4 y 6, lo que permite mitades, tercios y cuartos sin decimales. Con CSS Grid puedes usar el número de columnas que quieras; 12 sigue siendo la opción con menos fricción para trabajar en equipo.
¿Me pueden multar por un layout inaccesible?
En España, desde el 28 de junio de 2025 la Ley 11/2023 impone requisitos de accesibilidad digital a empresas privadas que prestan determinados servicios. Su régimen sancionador remite al texto refundido de la Ley General de derechos de las personas con discapacidad, con multas que en las infracciones muy graves pueden llegar al millón de euros. Hay excepciones, entre ellas para microempresas de servicios. Si tu web vende, gestiona reservas o presta servicios financieros, conviene revisar el encaje con asesoramiento jurídico, porque no es una recomendación de estilo.
¿Cómo afecta el layout al posicionamiento?
De forma directa a través de CLS, la Core Web Vital que mide la estabilidad visual durante la carga y que debe quedar por debajo de 0,1 en el percentil 75 de visitas reales. Las causas más frecuentes son imágenes sin dimensiones reservadas, contenido inyectado por encima del área visible y fuentes que cambian de métrica al cargar. Las tres se corrigen en la maquetación.
¿Debo diseñar siguiendo el patrón de lectura en F?
No. El patrón F es una señal de que el usuario ha dejado de leer y solo escanea, normalmente ante un muro de texto sin formato. La recomendación del Nielsen Norman Group, que documentó el patrón, es romperlo con jerarquía visual: encabezados descriptivos, párrafos cortos, listas y negritas sobre las palabras que cargan el significado.
¿Cuántas media queries necesita un layout moderno?
Muchas menos de las que se escribían hace unos años. Con minmax() y auto-fit las rejillas se reorganizan solas, clamp() resuelve la tipografía fluida y las container queries permiten que cada componente reaccione a su contenedor. Las media queries quedan para decisiones de página completa, como pasar de dos columnas a una.
