CSS Grid y Flexbox: el día que dejé de pelearme con el maquetado web

Hubo un tiempo en que centrar un elemento verticalmente en CSS me generaba ansiedad. Si llevas tiempo en el desarrollo web, sabrás exactamente a qué me refiero. El truco de `position: absolute; top: 50%; transform: translateY(-50%)` funcionaba pero nadie podía explicarme por qué funcionaba, y yo tampoco.

Flexbox cambió eso completamente. `display: flex; align-items: center; justify-content: center`. Tres propiedades. El elemento está centrado. Y lo más importante: entiendo por qué.

El salto de pensar en "trucos" a pensar en sistemas

Antes de aprender Flexbox y Grid bien, mi enfoque del CSS era reactivo: algo no quedaba como quería, buscaba el truco específico para ese caso, lo aplicaba, seguía. El resultado era código lleno de correcciones específicas que a veces colisionaban entre sí y que nadie más podía mantener sin romperse la cabeza.

Flexbox y Grid son sistemas de layout con una lógica coherente. Cuando los entiendes, dejas de buscar trucos y empiezas a diseñar el layout. Hay una diferencia enorme en la calidad del resultado y en la velocidad de trabajo.

Cuándo usar Flexbox y cuándo Grid

Esta pregunta confunde a mucha gente al principio. La respuesta simple: Flexbox es para layouts en una dimensión (una fila o una columna). Grid es para layouts en dos dimensiones (filas y columnas simultáneamente).

Un menú de navegación horizontal: Flexbox. Una galería de productos en cuadrícula: Grid. Un card con icono, texto y botón alineados horizontalmente: Flexbox. La estructura general de la página con header, sidebar, contenido principal y footer: Grid.

Dicho eso, en la práctica se usan combinados. Una cuadrícula de cards con Grid, y dentro de cada card, Flexbox para organizar el contenido. No son excluyentes.

El curso de Diseño Web con CSS Grid y Flexbox en Platzi

Hice el curso específico de CSS Grid y Flexbox en Platzi y fue de los más prácticos que recuerdo. No es solo teoría: construyes proyectos reales con cada concepto. La metodología de aprender haciendo obliga a aplicar lo que ves, no solo escucharlo.

Lo que más rescato del curso es que explica el pensamiento detrás de cada propiedad, no solo cómo se usa. Cuando entiendes que `flex-grow` distribuye el espacio disponible de forma proporcional, deja de ser magia y se convierte en una herramienta predecible.

Cómo impacta esto en los sitios que construimos

Los sitios que construimos en OSCARLEON tienen layouts responsivos desde el principio, no adaptados a móvil como parche posterior. Flexbox y Grid hacen que los componentes se adapten naturalmente a distintos tamaños de pantalla, con código más limpio y mantenible.

El resultado visible para el cliente es un sitio que se ve bien en cualquier dispositivo, carga rápido (menos código CSS), y puede actualizar contenido sin romper el diseño.

Si tu sitio web actual tiene problemas en móvil o quieres construir algo nuevo con estas tecnologías, hablemos.