¿Cómo se crea un layout con CSS Grid?

Question

Accepted Answer

**CSS Grid** es un sistema de diseño bidimensional — controla **filas y columnas simultáneamente**, a diferencia de la línea única de Flexbox. Se define una cuadrícula en el contenedor y se colocan elementos en ella.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## La unidad fr y repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fracción") distribuye el espacio disponible — `1fr 2fr` lo divide 1:2. `repeat(3, 1fr)` es taquigrafía para tres pistas iguales.

## Cuadrícula responsiva sin media queries

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Esta línea crea una cuadrícula de tarjetas totalmente responsiva: cada columna tiene un mínimo de `250px`; el navegador ajusta **tantas como sea posible** por fila y envuelve el resto — cambia automáticamente de 4 columnas en escritorio a 1 en móvil. `auto-fit` + `minmax` es uno de los patrones más populares de Grid.

## Colocar elementos en celdas

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Los elementos pueden extenderse por varias filas/columnas, lo que permite diseños estilo revista que son incómodos con Flexbox.

## Grid vs Flexbox

- **Grid** — Diseño 2D (filas *y* columnas): diseños de página, cuadrículas de tarjetas, dashboards.
- **Flexbox** — Diseño 1D (una fila o columna única): barras de navegación, grupos de botones, centrado.

Se componen bien — una celda de cuadrícula puede ser en sí misma un contenedor flex.

## Por qué es importante

Grid es la herramienta CSS de diseño más potente — maneja diseños de página completa y cuadrículas de tarjetas responsivas de manera limpia, a menudo reemplazando trucos de divs anidados.

Solo el patrón responsivo `auto-fit`/`minmax` elimina la necesidad de muchas media queries.