CSS Grid
El sistema para maquetar en dos dimensiones (filas y columnas).
CSS Grid se activa con display: grid. Con grid-template-columns defines el número y tamaño de columnas; la unidad fr (fracción) reparte el espacio disponible de forma proporcional, por ejemplo 1fr 1fr 1fr crea tres columnas iguales.
gap también funciona en Grid para separar filas y columnas. La función repeat() simplifica columnas repetidas: repeat(3, 1fr) equivale a 1fr 1fr 1fr.
Grid es ideal para layouts completos de página (encabezado, sidebar, contenido, pie) y galerías de tarjetas, mientras que Flexbox brilla en componentes de una sola dimensión. En proyectos reales ambos se combinan.
Ejemplo — pruébalo tú mismo
Ponlo a prueba: Crea una cuadrícula de 4 columnas con 8 tarjetas dentro.