Un layout, o diseño de layout, es la forma en que se distribuyen los elementos de una página o pantalla (texto, imágenes, navegación y botones) sobre una retícula, para que la jerarquía del contenido se entienda de un vistazo. En diseño gráfico se habla también de composición o maquetación, y en web, de maquetación web.
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.
Layout en diseño gráfico, en web y en programación
La palabra layout cambia de sentido según el ámbito, pero la idea es siempre la misma: decidir dónde va cada cosa y por qué.
En diseño gráfico y editorial es la composición de la página: dónde van titulares, texto, imágenes y márgenes sobre una retícula de columnas.
En diseño web es el esquema que organiza cabecera, contenido principal, contenido secundario y pie de página, y que se adapta a cada tamaño de pantalla.
En programación de interfaces un layout define la estructura de la interfaz de usuario. En Android, según su documentación oficial, se construye con una jerarquía de objetos
ViewyViewGroupque se declara en XML o se crea desde el código.
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.
Tipos de layout web: una, dos y tres columnas
Los layouts web más habituales se reducen a tres esquemas según el número de columnas, más las combinaciones entre ellos. Así los recoge MDN:
Una columna: el contenido se apila en vertical. Es el esquema natural en móvil.
Dos columnas: un contenido principal más ancho y uno secundario, como una barra lateral, más estrecho. Es lo típico de un blog.
Tres columnas: pensado para pantallas grandes de escritorio.
Mixtos: combinan los anteriores, siempre con la cabecera arriba, el pie abajo y el contenido principal como el área más grande.
Un criterio práctico para elegir: parte de una columna y añade columnas solo cuando el ancho disponible lo permita sin romper la medida de línea de 45-75 caracteres. El ejemplo de dos columnas con barra lateral es justo el de grid-template-areas de arriba; una cuadrícula de tarjetas, el de auto-fit que verás en la sección siguiente.
Cómo hacer un layout paso a paso
Para hacer un layout, ordena primero el contenido por importancia y elige después la retícula y el CSS, no al revés. Un orden de trabajo que funciona:
Lista el contenido y ordénalo por importancia: qué tiene que ver el usuario primero y qué agrupa con qué.
Fija la retícula (12 columnas en escritorio, 8 en tableta, 4 en móvil) y una escala de espaciado en múltiplos de 8 px.
Define la medida de línea del texto, entre 45 y 75 caracteres.
Monta el esqueleto de la página con Grid y resuelve el interior de cada bloque con Flexbox.
Hazlo adaptable con
auto-fit,clamp()y container queries, y comprueba el CLS y el reflow a 320 píxeles.
Si prefieres practicar el layout dentro de un proyecto completo, el programa Rock the AI Code incluye «Construir el frontend: interfaces con HTML, CSS, Tailwind, JavaScript y React, conectadas a APIs externas».
Layout adaptable sin llenar el CSS de media queries
Decir "que sea responsive" no basta. 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, y ya no hay motivo para evitarlas: según MDN, @container está disponible en los distintos navegadores desde febrero de 2023 y figura como «Widely available» en Baseline (consultado el 29-10-2026). 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á el error más extendido en las guías de layout: recomendar "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: 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
Decir 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.
En el mismo programa, uno de los proyectos es «Diseña y despliega una landing responsive con HTML, CSS y un flujo de publicación real». Puedes consultar el resto del temario en la ficha de Rock the AI Code.
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.
¿Qué es un layout en diseño?
Es la disposición de los elementos de una página o pantalla (texto, imágenes, navegación y botones) sobre una retícula, de modo que la jerarquía del contenido se entienda de un vistazo. En diseño gráfico se llama también composición, y en web, maquetación. Decide el orden y el peso visual de cada pieza antes de escribir una línea de código.
¿Qué es un layout en programación?
Es la estructura que dispone los componentes de una interfaz de usuario. En Android, por ejemplo, un layout se construye con una jerarquía de objetos View y ViewGroup, y puede declararse en un archivo XML o crearse desde el código. En web el equivalente es el CSS que coloca los bloques de la página, con Grid y Flexbox.
¿Qué es un layout en diseño gráfico?
Es la composición de una página: la posición de titulares, texto, imágenes y márgenes sobre una retícula de columnas. Sirve para que el lector recorra el contenido en el orden que quiere el diseñador. En el diseño web ese mismo concepto se implementa con HTML y CSS, y se llama maquetación web.
¿Cómo se hace un layout?
Se ordena primero el contenido por importancia, se fija una retícula (12 columnas en escritorio, 8 en tableta y 4 en móvil) con espaciado en múltiplos de 8 px y se limita la línea de texto a 45-75 caracteres. Después se monta el esqueleto con Grid, el interior con Flexbox y se adapta con auto-fit, clamp() y container queries.
¿Qué tipos de layout web existen?
Los más habituales son el de una columna, típico de móvil, el de dos columnas, con contenido principal y barra lateral, y el de tres columnas, para pantallas grandes de escritorio. También hay diseños mixtos que combinan los anteriores. En todos, la cabecera va arriba, el pie abajo y el contenido principal ocupa el área mayor.
