CSSLayout Lab
CSS Layout Lab es un espacio interactivo para aprender y experimentar con las distintas formas de construir layouts en CSS: desde los modelos clásicos como block e inline, hasta herramientas modernas como flexbox y grid.
CSS Layout Lab aporta una documentación clara y ejemplos dinámicos, con los cuales, podrás modificar valores y ver en tiempo real cómo se ajusta la disposición de los elementos, entendiendo mejor las posibilidades de cada enfoque y cómo aplicarlos en tus proyectos.
Introducción a los layouts en CSSElige por dónde empezar a construir
Fundamentos
Modelo de caja, display, tamaños, márgenes, float y posicionamiento: los cimientos de cualquier layout.
9 temasFlexbox
Distribuye elementos en un solo eje y deja que se adapten al espacio disponible.
12 temasGrid
Controla filas y columnas a la vez para definir estructuras completas.
18 temasMás allá
Container queries, propiedades lógicas, multicolumna, anchor positioning y recetas listas para tus proyectos.
6 temas
Aprende de forma visual con ejemplos prácticos y dinámicos
Todos los ejemplos son interactivos: puedes modificar el código HTML y CSS directamente en los editores y ver los cambios en tiempo real. Prueba a cambiar cualquier valor de este ejemplo y comprueba el resultado. ¡Espero que disfrutes del contenido!
Sobre mí
Después de muchos años trabajando en el desarrollo web, CSS sigue sorprendiéndome por sus posibilidades y constantes novedades. Uno de sus usos más importantes y frecuentes es la gestión de layouts, que permite organizar y distribuir los elementos de una página de manera flexible y precisa.
Por eso he creado esta documentación, donde intento explicar de forma sencilla la creación de layouts con CSS y cómo aplicar distintas técnicas según las necesidades de cada proyecto.
Este tutorial está pensado para todo tipo de desarrolladores, desde juniors hasta expertos. Algunos podrán descubrir conceptos básicos por primera vez, mientras que otros podrán observar de manera práctica cómo se comportan ciertas propiedades que a menudo se delegan en librerías como Bootstrap o Tailwind, explorando directamente grid y flexbox.
¡Espero que lo disfruten!
Juan Manuel Muñoz González
Front End Architect