1. Introducción a Grid Layout
CSS Grid Layout es el sistema de diseño más potente disponible en CSS. A diferencia de Flexbox (que es unidimensional), Grid es bidimensional: maneja filas y columnas simultáneamente.
Grid vs Flexbox
- Flexbox: Contenido primero. "Tengo estos elementos, ¿cómo los distribuyo?"
- Grid: Diseño primero. "Tengo este diseño (cuadrícula), ¿dónde pongo los elementos?"
2. Definir la Cuadrícula
Para crear una grid, aplicamos display: grid al contenedor. Luego definimos las "pistas"
(filas y columnas).
grid-template-columns / rows
Define el tamaño de las columnas y filas.
Unidades Clave:
px,rem,%: Unidades estándar.fr(Fracción): La unidad mágica. Representa una fracción del espacio disponible.auto: Se adapta al tamaño del contenido.
.container {
display: grid;
/* 3 columnas: 100px, 1 fracción, 2 fracciones */
grid-template-columns: 100px 1fr 2fr;
/* 2 filas de 50px */
grid-template-rows: 50px 50px;
}repeat()
Función para evitar repeticiones. repeat(3, 1fr) es igual a 1fr 1fr 1fr.
minmax()
Define un rango de tamaño. "Mínimo 100px, pero si puedes, crece hasta 1fr".
grid-template-columns: repeat(3, minmax(150px, 1fr));gap
Define el espacio entre celdas (antes grid-gap).
gap: 20px; /* Filas y Columnas */
gap: 10px 30px; /* Filas | Columnas */3. Posicionamiento de Ítems
Puedes colocar elementos en cualquier lugar de la cuadrícula usando números de línea.
grid-column / grid-row
Shorthand para start / end. Las líneas se cuentan desde 1.
.item {
grid-column: 1 / 3; /* Empieza en línea 1, acaba en 3 (Ocupa 2 celdas) */
grid-row: 2 / 4; /* Empieza en fila 2, acaba en 4 */
}Si no quieres contar líneas, di cuántas celdas quieres ocupar:
grid-column: span 2;
4. Áreas de Plantilla (Grid Areas)
La forma más visual y semántica de diseñar. Das nombres a las celdas y dibujas el layout.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.cabecera { grid-area: header; }
.lateral { grid-area: sidebar; }
.contenido { grid-area: main; }
.pie { grid-area: footer; }5. Alineación
Grid tiene dos niveles de alineación, similar a Flexbox pero en dos ejes.
Alinear Ítems (Dentro de su celda)
- justify-items: Horizontal (start, end, center, stretch).
- align-items: Vertical (start, end, center, stretch).
- place-items: Shorthand (align justify).
Alinear la Grid (Dentro del contenedor)
Si la grid es más pequeña que el contenedor.
- justify-content: Horizontal.
- align-content: Vertical.
6. Trucos Avanzados y Modernos
Grid Responsiva Automática (RAM Pattern)
El patrón más famoso. Crea columnas que se adaptan automáticamente sin usar Media Queries.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));Esto dice: "Crea tantas columnas de mínimo 200px como quepan. Si sobra espacio, repártelo (1fr)".
Grid Auto Flow Dense
Si tienes huecos vacíos en tu grid porque un elemento grande no cabía, grid-auto-flow: dense
le dice al navegador que intente rellenar esos huecos con elementos más pequeños que vengan después.
Subgrid NUEVO
Permite a un hijo heredar la cuadrícula de su padre en lugar de definir una nueva.
.hijo {
display: grid;
grid-template-columns: subgrid; /* Usa las columnas del padre */
}