≡En resumen
- Un fluid layout usa medidas relativas para que la página ocupe siempre el ancho disponible.
- Se diferencia del diseño fijo, que usa píxeles, y del adaptativo, que salta entre varios diseños fijos.
- El responsive combina rejilla fluida, imágenes flexibles y media queries.
- Con CSS actual (Flexbox, Grid, clamp) hacer un diseño fluido es más sencillo y necesita menos breakpoints.
- Su riesgo son las líneas de texto demasiado largas en pantallas grandes: se controla con un ancho máximo.
01 ¿Qué es un fluid layout?
En inglés se usan fluid layout y liquid layout como sinónimos, por la imagen de un líquido que toma la forma del recipiente. El concepto es anterior a los smartphones: a finales de los noventa y en los 2000 ya se discutía entre diseños fijos, cómodos de controlar, y diseños líquidos, que aprovechaban toda la pantalla. La llegada del móvil resolvió el debate a favor de la flexibilidad.
02 Cómo funciona un diseño fluido
La idea es que cada elemento mida una proporción de su contenedor. En su artículo de 2010, Ethan Marcotte resumió el cálculo con una fórmula: objetivo ÷ contexto = resultado. Si en tu maqueta de 960 píxeles una columna mide 640, en CSS escribes width: 66.666% (640 ÷ 960). Hoy casi nunca hace falta hacer esa cuenta a mano, porque CSS ofrece herramientas que reparten el espacio por ti.
| Herramienta | Qué hace | Ejemplo |
|---|---|---|
| Porcentaje (%) | Mide respecto al ancho del contenedor padre | width: 50% |
| vw / vh | 1 % del ancho o del alto de la ventana | font-size: 4vw |
| fr (CSS Grid) | Reparte el espacio libre en fracciones | grid-template-columns: 2fr 1fr |
| Flexbox | Estira o encoge elementos en una fila o columna | flex: 1 1 300px |
| min() y max() | Eligen el valor menor o mayor de varios | width: min(100%, 70ch) |
| clamp() | Valor fluido con mínimo y máximo | font-size: clamp(1rem, 2.5vw, 2rem) |
| max-width en imágenes | Evita que una imagen desborde su columna | img { max-width: 100%; height: auto; } |
03 Fluid layout vs fijo, adaptativo y responsive
Estos términos se confunden a menudo porque describen cosas distintas: el fluido habla de las unidades, mientras que el diseño adaptativo y el diseño responsive describen la estrategia completa para servir la web a distintos dispositivos.
| Tipo | Cómo se comporta | Unidades | Punto débil |
|---|---|---|---|
| Fijo | Mide siempre lo mismo, sea cual sea la pantalla | Píxeles | Scroll horizontal en móviles y huecos en monitores grandes |
| Fluido o líquido | Se estira y encoge de forma continua | Relativas (%, fr, vw) | Sin límites, el texto queda demasiado ancho o estrecho |
| Elástico | Escala con el tamaño de letra del usuario | em / rem | Puede desbordar si el usuario amplía mucho el texto |
| Adaptativo | Salta entre varios diseños fijos según el ancho | Píxeles por rango | Más diseños que mantener y huecos entre rangos |
| Responsive | Rejilla fluida más media queries que reorganizan el contenido | Relativas más breakpoints | Requiere planificar bien el contenido para cada tamaño |
04 Ejemplo de fluid layout con CSS
Con CSS Grid puedes crear una rejilla que coloca tantas columnas como quepan, cada una de al menos 250 píxeles y repartiendo el espacio sobrante:
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
En un móvil verás una columna; en una tablet, dos o tres; en un monitor, cuatro o cinco. Todo sin una sola media query. Añade max-width: 1200px; margin-inline: auto; al contenedor para que en pantallas muy grandes no se estire sin fin.
-
1
Parte del contenido
Decide qué bloques hay y en qué orden deben leerse en una sola columna.
-
2
Define un contenedor con ancho máximo
Fluido hasta un límite razonable para que las líneas de texto no sean eternas.
-
3
Reparte con Grid o Flexbox
Usa fr, minmax() o flex en lugar de anchos fijos.
-
4
Haz flexibles las imágenes y los vídeos
max-width: 100% y proporciones con aspect-ratio.
-
5
Añade breakpoints solo donde el diseño se rompa
No por modelo de dispositivo, sino cuando el contenido lo pida.
05 Ventajas y desventajas del diseño fluido
| Ventajas | Desventajas |
|---|---|
| Aprovecha todo el ancho disponible en cualquier pantalla | En monitores grandes, líneas de texto demasiado largas si no hay ancho máximo |
| Evita el scroll horizontal y el zoom en móviles | Menos control del diseño al píxel que un layout fijo |
| Una sola maqueta para todos los tamaños | Las imágenes necesitan varias resoluciones para no perder calidad ni peso |
| Facilita la accesibilidad cuando el usuario amplía el texto | Exige probar en muchos anchos, no solo en tres dispositivos |
Anchos fijos escondidos
Una tabla, un iframe o una imagen con width en píxeles basta para romper el diseño fluido en móvil.
Textos sin límite
Columnas de texto que ocupan todo el monitor y cansan al leer.
Imágenes pesadas
Servir la misma imagen enorme a todos los tamaños en vez de usar srcset.
06 Diseño fluido y accesibilidad
Las Pautas de Accesibilidad WCAG incluyen desde su versión 2.1 el criterio 1.4.10 Reflow, de nivel AA: el contenido debe poder usarse sin perder información ni funciones y sin desplazamiento en dos direcciones a un ancho equivalente a 320 píxeles CSS. Pensado para personas con baja visión que amplían la página, en la práctica solo se cumple con una maquetación fluida.
Esto no es solo buena práctica: la Ley Europea de Accesibilidad obliga desde 2025 a muchas tiendas online y servicios digitales. Tienes el detalle en nuestra guía sobre la accesibilidad web y la ley europea (EAA).
- ✓Amplía la página al 400 % en un navegador de escritorio: no debe aparecer scroll horizontal.
- ✓Comprueba que menús, tablas y formularios siguen siendo usables a 320 píxeles de ancho.
- ✓Evita alturas fijas en contenedores con texto: al ampliar, el texto se cortaría.
- ✓Usa unidades rem para el texto, respetando el tamaño de letra que eligió el usuario.
07 ¿Cuándo usar un fluid layout?
Hoy prácticamente siempre, como base de cualquier web. La pregunta real no es fluido o fijo, sino cuánto control añadir encima: anchos máximos, breakpoints y componentes que se reorganicen. Las webs que siguen maquetadas en píxeles fijos suelen ser antiguas y son candidatas a una renovación, algo que repasamos en las tendencias de diseño web que sí mejoran resultados.
Preguntas frecuentes sobre Fluid Layout
Es un diseño web que define los anchos con unidades relativas, como porcentajes o fracciones, para que la página se estire o encoja de forma continua según el tamaño de la ventana.
El fluido se refiere a usar unidades relativas; el responsive combina esa rejilla fluida con imágenes flexibles y media queries que reorganizan el contenido en cada tamaño de pantalla.
El fluido cambia de tamaño de forma continua; el adaptativo tiene varios diseños fijos y muestra uno u otro según el rango de ancho de la pantalla.
Porcentajes, vw, fr de CSS Grid, em y rem, y funciones como min(), max() y clamp() para fijar límites.
Sí. Liquid layout y fluid layout son sinónimos en inglés, y en español se usan diseño líquido y diseño fluido indistintamente.
No siempre. Con Grid, Flexbox y clamp() muchas páginas se adaptan solas, pero suele hacer falta algún breakpoint para reorganizar menús o columnas.
Indirectamente, sí: evita problemas de usabilidad en móviles, que es la versión con la que Google rastrea e indexa la mayoría de webs.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗