Grid
Si Flexbox piensa en una sola dirección (fila o columna), Grid piensa en las dos a la vez. Es la herramienta ideal para maquetar la estructura general de una página, o cualquier cuadrícula de tarjetas.
Activar Grid
Convierte al contenedor en una cuadrícula. Por sí solo no hace mucho — hace falta definir columnas y filas.
Define cuántas columnas hay y qué anchura tiene cada una.
Una unidad especial de Grid: "fracción" del espacio disponible. 1fr 1fr 1fr crea tres columnas de igual ancho, repartiendo el espacio sobrante.
repeat(3, 1fr) es equivalente a escribir
1fr 1fr 1fr, pero mucho más cómodo si tienes muchas
columnas: grid-template-columns: repeat(6, 1fr);
Elementos que ocupan más de una celda
Hace que ese elemento ocupe el ancho de 2 columnas en vez de 1.
Lo mismo, pero en alto: ocupa 2 filas.
Maquetar una página típica con Grid
Grid brilla especialmente para el esqueleto general de una página: cabecera, barra lateral, contenido y pie, todo en una sola declaración.
grid-template-areas es quizás lo más elegante de
Grid: literalmente "dibujas" el mapa de la página con palabras, y luego cada
elemento se asigna a su zona con grid-area.
Intentar usar Grid para alinear un solo puñado de elementos en una fila simple (como los botones de un formulario). Para eso, Flexbox suele ser más simple y directo. Usa Grid cuando de verdad trabajas en dos dimensiones (filas Y columnas a la vez).
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué significa la unidad "fr" en Grid?
2. ¿Qué hace grid-column: span 2?
3. ¿Cuándo conviene más Grid que Flexbox?