Ejemplos
display: grid; grid-template-columns: 1fr 3fr; — Layout sidebar + contenidogrid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); — Columnas responsive automáticasgrid-template-areas: 'header header' 'sidebar main' 'footer footer'; — Áreas nombradasgap: 2rem; — Espaciado uniforme entre celdasgrid-column: 1 / 3; — Elemento que ocupa 2 columnas
Preguntas frecuentes
¿CSS Grid reemplaza a Flexbox?
No, se complementan. Grid es para layouts bidimensionales (página completa, dashboards), Flexbox para componentes unidimensionales (navbar, fila de botones). Muchas veces usás Grid para la estructura de página y Flexbox dentro de las secciones. Ambos tienen soporte completo en navegadores modernos.
¿Cómo hago un layout de 3 columnas responsive con Grid?
Usá repeat() con auto-fit o auto-fill: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));. Esto crea columnas que nunca bajan de 300px y se ajustan automáticamente. En pantallas chicas se apilan en 1 columna, en grandes se expanden hasta 3 o más según el espacio disponible, sin media queries.
¿Qué es la diferencia entre grid-template y grid-auto?
grid-template-* define la grilla explícita (filas/columnas que declarás). grid-auto-* controla la grilla implícita (filas/columnas que Grid crea automáticamente si agregás más elementos). Ej: si definís 2 filas pero tenés 10 elementos, Grid crea 8 filas implícitas. Con grid-auto-rows: 150px; controlás su altura.