Layout con Grid

CSS Grid es un sistema de layout bidimensional: controla filas y columnas al mismo tiempo. Mientras Flexbox es ideal para distribuir elementos en una línea, Grid brilla cuando necesitas estructurar toda una página o sección con múltiples dimensiones.

Activar Grid

.contenedor {
  display: grid;
}

Los hijos directos se convierten en grid items.

Definir columnas y filas

grid-template-columns

.contenedor {
  /* 3 columnas de igual ancho */
  grid-template-columns: 1fr 1fr 1fr;

  /* Lo mismo con repeat */
  grid-template-columns: repeat(3, 1fr);

  /* Sidebar + contenido */
  grid-template-columns: 250px 1fr;

  /* Mixto */
  grid-template-columns: 200px 1fr 2fr;
}

fr es la unidad fracción: reparte el espacio disponible proporcionalmente.

grid-template-rows

.contenedor {
  grid-template-rows: auto 1fr auto; /* header | contenido | footer */
}

gap

El espacio entre celdas:

.contenedor {
  gap: 1.5rem;          /* igual en filas y columnas */
  gap: 1rem 2rem;       /* filas | columnas */
  row-gap: 1rem;
  column-gap: 2rem;
}

Posicionar items

Por defecto los items se colocan automáticamente celda a celda. Pero puedes controlarlos manualmente:

.item {
  /* De la línea 1 a la 3 en columnas (ocupa 2 columnas) */
  grid-column: 1 / 3;

  /* Shorthand con span */
  grid-column: span 2;

  /* De la línea 1 a la 2 en filas */
  grid-row: 1 / 2;
}

grid-template-areas

La forma más legible de definir un layout completo:

.pagina {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

El resultado es un layout clásico de tres filas con sidebar, escrito de forma completamente visual.

auto-fill y auto-fit: layouts responsivos sin media queries

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

• minmax(280px, 1fr): cada columna tiene mínimo 280px y máximo 1fr
• auto-fill: crea tantas columnas como quepan en el ancho disponible

El resultado: una cuadrícula que pasa automáticamente de 1 a 2 a 3 o más columnas según el ancho, sin escribir ninguna media query.

Alineación en Grid

.contenedor {
  /* Alineación de todo el grid dentro del contenedor */
  justify-content: center;   /* eje horizontal */
  align-content: center;     /* eje vertical */

  /* Alineación de los items dentro de su celda */
  justify-items: center;
  align-items: center;
}

/* Por item individual */
.item {
  justify-self: end;
  align-self: start;
}

Flexbox vs Grid: ¿cuándo usar cada uno?

En la práctica, se usan juntos: Grid para la estructura macro, Flexbox dentro de los componentes.

En la siguiente lección vemos diseño responsive: cómo adaptar estos layouts a cualquier tamaño de pantalla con media queries.