Combinar Flexbox y Grid

Flexbox y Grid no son rivales: están diseñados para trabajar juntos. El patrón habitual consiste en usar CSS Grid para la estructura general de la página y, después, Flexbox dentro de cada área de la cuadrícula para organizar el contenido del componente.

Defina la estructura general de la página con Grid. Dentro de cada área de la cuadrícula, use Flexbox para organizar los componentes: enlaces de navegación en una fila y contenido de tarjetas en una columna.

El patrón clásico: Grid para el diseño de las tarjetas y Flex para el diseño interno de cada tarjeta. Así, las tarjetas se alinean en la cuadrícula, mientras que su contenido interno (imagen, título, cuerpo y pie) se apila correctamente.

Una barra de navegación habitual combina ambos sistemas. La propia navegación es un contenedor flex para el logotipo y los enlaces. La sección de enlaces puede ser otro contenedor flex. Un mega menú puede usar Grid para organizar el contenido en varias columnas.

El diseño «Holy Grail» (encabezado, zona central de tres columnas y pie) se crea fácilmente con Grid hoy en día. Las tres columnas —barra lateral izquierda, contenido principal y barra lateral derecha— son columnas de Grid; el contenido de cada una utiliza Flexbox.

Tanto Grid como Flexbox pueden centrar el contenido perfectamente. Grid: place-items: center (abreviatura de align-items + justify-items). Flex: justify-content: center; align-items: center.

En dispositivos móviles: una sola columna (la navegación arriba). En tabletas y pantallas más grandes: barra lateral y contenido uno al lado del otro. Grid hace que esto sea declarativo: cambie template-areas en una media query.

Este es un microdiseño muy habitual: un icono junto al texto. Flexbox es perfecto para ello porque se trata de una sola fila con alineación.

Grid cuando piensa en filas Y columnas, cuando necesita alinear elementos en varias pistas o cuando está creando la estructura de una página. Flex cuando piensa en una sola dirección, cuando los elementos deben reducirse y crecer o cuando organiza una fila de botones o una pila de elementos.

A veces, un elemento block sencillo con max-width y margin: auto es mejor que una cuadrícula compleja. No todos los diseños necesitan Grid. Use la herramienta más sencilla que resuelva el problema.

En DevTools, haga clic en las insignias grid/flex del panel Elements para superponer las líneas de la cuadrícula o los contornos de los elementos flex. Esto hace visible la estructura de diseño, que de otro modo sería invisible, y resulta muy útil para diagnosticar desalineaciones.

¿Qué combinación de herramientas de diseño es la más habitual para los diseños de página y de componentes, respectivamente?

Grid y Flexbox son complementarios. Use Grid para la estructura bidimensional de la página. Use Flexbox para el contenido interno unidimensional de los componentes. place-items: center en una cuadrícula centra todo. flex-direction: column + flex: 1 en el cuerpo de una tarjeta empuja los pies de las tarjetas hacia abajo. Depure con las insignias de superposición de DevTools.