⏱️ Duración estimada: 2 horas

Sesión 11 - Introducción a CSS Grid

Contenidos de la Sesión

En esta sesión se ha introducido CSS Grid Layout, el sistema de maquetación bidimensional de CSS. A diferencia de Flexbox (que trabaja en un solo eje a la vez), Grid permite controlar simultáneamente filas y columnas.

Se ha visto únicamente la declaración imperativa de la grid: definir explícitamente columnas y filas y posicionar los elementos con grid-column-start/end y grid-row-start/end.

Los ejemplos comentados en clase se encuentran en la carpeta grid-examples/.

1. display: grid — Activar el modelo Grid

Aplicar display: grid a un contenedor convierte a todos sus hijos directos en grid items. El contenedor pasa a llamarse grid container.

.contenedor {
  display: grid;
}

Por defecto, sin ninguna otra propiedad, los items se colocan uno debajo del otro en una sola columna (igual que el flujo normal de bloque).

2. grid-template-columns — Definir las columnas

grid-template-columns define el número y el tamaño de las columnas de la grid. Cada valor corresponde a una columna.

.contenedor {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 columnas de 200px */
}

La unidad fr (fracción)

La unidad fr representa una fracción del espacio disponible en el contenedor. Es la unidad más habitual en Grid porque crea layouts flexibles.

.contenedor {
  grid-template-columns: 1fr 1fr 1fr; /* 3 columnas iguales */
}

.contenedor-mixto {
  grid-template-columns: 1fr 3fr; /* col 1 ocupa 1/4, col 2 ocupa 3/4 */
}

La función repeat()

repeat() evita repetir el mismo valor varias veces.

/* estas dos declaraciones son equivalentes */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

repeat() también acepta un patrón como segundo argumento:

/* repite el patrón "1fr 3fr" dos veces: 1fr 3fr 1fr 3fr */
grid-template-columns: repeat(2, 1fr 3fr);

/* patrón complejo del ejemplo de clase */
grid-template-columns: repeat(2, 1fr 3fr) 0.5fr 1fr;
/* resultado: 1fr 3fr 1fr 3fr 0.5fr 1fr  → 6 columnas */

3. grid-template-rows — Definir las filas

grid-template-rows funciona igual que grid-template-columns pero para las filas.

body {
  display: grid;
  grid-template-columns: 6fr 1fr;
  grid-template-rows: 60px 1fr 60px; /* header 60px, main flexible, footer 60px */
}

4. grid-auto-rows — Altura de las filas implícitas

Cuando hay más items de los que caben en las filas definidas con grid-template-rows, Grid crea filas implícitas automáticamente. grid-auto-rows controla el tamaño de esas filas.

section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px; /* todas las filas implícitas tendrán 200px de alto */
}

5. gap — Espaciado entre celdas

gap (antes llamado grid-gap) define el espacio entre filas y columnas de la grid. Funciona igual que en Flexbox.

.contenedor {
  gap: 1em; /* mismo espacio en filas y columnas */
  gap: 1em 2em; /* row-gap: 1em, column-gap: 2em */
  row-gap: 1em;
  column-gap: 2em;
}

6. place-items — Alineación de los items en sus celdas

place-items es la propiedad shorthand que combina align-items (eje de bloque/vertical) y justify-items (eje en línea/horizontal).

.contenedor {
  place-items: center; /* centra en ambos ejes */
  place-items: stretch; /* estira para ocupar toda la celda (valor por defecto) */
  place-items: start end; /* align-items: start, justify-items: end */
}

7. Posicionamiento de items: grid-column-start / grid-column-end

Por defecto cada item ocupa una sola celda. Para que un item ocupe varias columnas se usan grid-column-start y grid-column-end. Los valores son números de línea (no de columna).

/* ocupa desde la línea 1 hasta la línea 3 → 2 columnas */
.item {
  grid-column-start: 1;
  grid-column-end: 3;
}

Ejemplo del ejemplo de clase — imagen que ocupa las dos primeras columnas:

section img {
  grid-column-start: 1;
  grid-column-end: 3;
}

Valores negativos

El valor -1 hace referencia a la última línea de la grid (sea cual sea el número de columnas). Es muy útil para que un elemento ocupe toda la anchura.

header {
  grid-column-start: 1;
  grid-column-end: -1; /* llega hasta el final, sin importar cuántas columnas haya */
}

8. Posicionamiento de items: grid-row-start / grid-row-end

Funcionan igual que sus equivalentes de columna, pero para las filas.

.card.important {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 7;
}

9. La palabra clave span

En lugar de indicar la línea de fin, se puede usar span N para indicar cuántas pistas (columnas o filas) debe abarcar el item.

/* estas dos declaraciones son equivalentes */
.item {
  grid-column-start: 4;
  grid-column-end: 6;
}

.item {
  grid-column-start: 4;
  grid-column-end: span 2; /* abarca 2 columnas a partir de la línea 4 */
}

10. Shorthand grid-column y grid-row

Las propiedades start y end se pueden escribir de forma abreviada con una barra /:

/* longhand */
.item {
  grid-column-start: 4;
  grid-column-end: span 2;
}

/* shorthand equivalente */
.item {
  grid-column: 4 / span 2;
}

/* otros ejemplos de shorthand */
header {
  grid-column: 1 / -1; /* de la primera a la última línea */
}

footer {
  grid-column: 1 / -1;
}

11. Shorthand grid-area (4 valores)

grid-area con 4 valores es la forma más compacta de posicionar un item. El orden es:

grid-area: row-start / column-start / row-end / column-end;

/* longhand */
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: -1;
}

/* shorthand equivalente */
.item {
  grid-area: 1 / 1 / 2 / -1;
}

12. Ejemplo: layout de página completa con Grid

El archivo pagina2.html muestra cómo usar Grid para el layout clásico de una página (header, main, aside, footer):

body {
  height: 100vh;
  display: grid;
  grid-template-columns: 6fr 1fr; /* main ocupa 6 partes, aside 1 parte */
  grid-template-rows: 60px 1fr 60px; /* header, contenido, footer */
}

header {
  grid-column-start: 1;
  grid-column-end: -1; /* el header ocupa toda la anchura */
}

footer {
  grid-column-start: 1;
  grid-column-end: -1; /* el footer también ocupa toda la anchura */
}

Resultado visual:

┌─────────────────────────────────────┐  ← header (full width)
├──────────────────────────┬──────────┤
│          main (6fr)      │ aside(1fr)│  ← fila central (1fr)
├──────────────────────────┴──────────┤
│          footer (full width)        │  ← footer (full width)
└─────────────────────────────────────┘

13. Estructura de los ejemplos de la sesión

grid-examples/
├── index.html    — Grid con múltiples columnas, posicionamiento y span
├── style.css     — Estilos del ejemplo principal
├── pagina2.html  — Layout de página completa con Grid
├── style2.css    — Estilos del layout de página
└── reset.css     — Reset CSS compartido

Resumen

En esta sesión hemos introducido:

• ✅ display: grid para activar el modelo Grid en un contenedor
• ✅ grid-template-columns para definir el número y tamaño de columnas
• ✅ La unidad fr (fracción del espacio disponible)
• ✅ La función repeat() para definir patrones de columnas de forma compacta
• ✅ grid-template-rows para definir filas de altura fija o flexible
• ✅ grid-auto-rows para controlar el tamaño de las filas implícitas
• ✅ gap para el espaciado entre celdas de la grid
• ✅ place-items para alinear los items dentro de sus celdas
• ✅ grid-column-start / grid-column-end para posicionar items en columnas
• ✅ grid-row-start / grid-row-end para posicionar items en filas
• ✅ La palabra clave span para indicar cuántas pistas debe abarcar un item
• ✅ Los shorthands grid-column, grid-row y grid-area (4 valores)
• ✅ Valores negativos de línea (-1 = última línea)

Lo más importante:

Recursos Adicionales

• MDN - CSS Grid Layout
• MDN - grid-template-columns
• MDN - grid-template-rows
• MDN - grid-column
• MDN - grid-row
• MDN - grid-area
• CSS Tricks - A Complete Guide to CSS Grid
• Josh Comeau - An Interactive Guide to CSS Grid
• Grid Garden — Juego para practicar CSS Grid
• layoutit — Herramienta visual para diseñar grids