CSS Moderno: Guía Completa de Flexbox, Grid y Layouts Responsivos

CSS ha evolucionado enormemente en los últimos años. Lo que antes requería hacks, floats con clearfix, o tablas invisibles, ahora se resuelve con propiedades nativas elegantes. Flexbox y Grid cambiaron las reglas del juego, pero muchos desarrolladores aún usan solo una fracción de su poder. Esta guía cubre todo lo que necesitas saber para dominar layouts modernos en 2026.

No voy a empezar con la historia de CSS ni con teoría aburrida. Vamos directo a lo práctico: cómo construir layouts reales que funcionan en todos los navegadores modernos.

Flexbox: Más Allá de Centrar un Div

El caso de uso más conocido de Flexbox es centrar un elemento, pero eso es solo el 1% de su capacidad. Flexbox resuelve problemas de distribución de espacio en una dimensión. Las propiedades clave son flex-direction, justify-content, align-items, y flex-wrap. Pero la más importante y menos entendida es flex. La propiedad flex es una abreviatura de flex-grow, flex-shrink, y flex-basis.

Un error común es usar width en elementos flexibles. No lo hagas. Usa flex-basis en su lugar. flex-basis: 200px significa "este elemento debería intentar medir 200px antes de ajustarse". Combinado con flex-grow: 1, el elemento ocupará 200px o más si hay espacio disponible.

CSS Grid: Layouts en Dos Dimensiones

Grid es para layouts en dos dimensiones. Si Flexbox es para filas o columnas, Grid es para filas y columnas al mismo tiempo. El caso clásico es un layout de página completo: header, sidebar, contenido principal, y footer. Con Grid, defines las áreas con grid-template-areas y asignas cada elemento a su área.

La función más poderosa de Grid es minmax(). Combinada con auto-fit o auto-fill dentro de repeat(), creas layouts responsivos sin un solo media query. repeat(auto-fit, minmax(300px, 1fr)) significa "tantas columnas de al menos 300px como quepan, y que se estiren para llenar el espacio".

Container Queries: El Santo Grial de los Componentes Reutilizables

Container queries son lo mejor que le ha pasado a CSS en años. Antes, un componente respondía al tamaño de la ventana. Si tenías una tarjeta que se veía bien en el contenido principal pero mal en la barra lateral, tenías que escribir media queries específicos para cada contexto. Con container queries, el componente responde al tamaño de su contenedor padre.

Para usar container queries, define el contenedor con container-type: inline-size en el padre. Luego, escribe @container (min-width: 400px) { ... } para estilos que se aplican cuando el contenedor mide al menos 400px.

Subgrid: Alineación Perfecta entre Componentes

Subgrid permite que los hijos de un grid item hereden las columnas del grid padre. Cuando un grid item tiene display: grid y grid-template-columns: subgrid, sus hijos se alinean con las columnas del abuelo. El caso de uso más común es una tarjeta con imagen, título, descripción y botón, donde quieres que todos los títulos estén alineados verticalmente.

El Selector :has() - El Selector Padre que Todos Queríamos

:has() selecciona un elemento si contiene otro elemento que coincide con el selector. .card:has(img) selecciona las tarjetas que contienen imágenes. Puedes cambiar el estilo de un formulario cuando un input está enfocado: .form-group:has(input:focus). Puedes ocultar elementos vacíos: li:not(:has(*)).

@layer: Control de Cascada Explícito

@layer resuelve problemas de especificidad permitiéndote definir el orden de la cascada explícitamente. Define capas como @layer reset, base, components, utilities. Todo lo que pongas en la capa components tiene prioridad sobre base, independientemente de la especificidad de los selectores.