CSS Grid

¿Qué es CSS Grid?

CSS Grid es un sistema de layout bidimensional diseñado para crear diseños complejos de páginas web. A diferencia de Flexbox (que es unidimensional), Grid puede manejar tanto filas como columnas simultáneamente, haciéndolo ideal para layouts de páginas completas.

Conceptos Básicos

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;  /* 3 columnas */
  grid-template-rows: auto 1fr auto;        /* 3 filas */
  gap: 20px;                                /* Espacio entre items */
}

Propiedades del Contenedor

/* Tamaños fijos */
grid-template-columns: 100px 200px 100px;

/* Unidad fr (fracción del espacio disponible) */
grid-template-columns: 1fr 2fr 1fr;

/* Mezcla de unidades */
grid-template-columns: 250px 1fr 250px;

/* repeat() para patrones */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 100px);

/* auto-fill y auto-fit para grids responsivos */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

.container {
  gap: 20px;          /* Filas y columnas */
  gap: 20px 10px;     /* Fila | Columna */
  row-gap: 20px;
  column-gap: 10px;
}

/* Alinear items dentro de sus celdas */
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

/* Alinear el grid completo dentro del contenedor */
.container {
  justify-content: start | end | center | space-between | space-around;
  align-content: start | end | center | space-between | space-around;
}

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

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

Propiedades de los Items

.item {
  grid-column: 1 / 3;      /* Desde línea 1 hasta línea 3 */
  grid-row: 1 / 2;         /* Desde línea 1 hasta línea 2 */

  /* Atajo */
  grid-column: 1 / span 2; /* Empieza en 1, abarca 2 columnas */
  grid-row: 2 / span 3;    /* Empieza en 2, abarca 3 filas */
}

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Patrones Comunes de Grid

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.featured {
  grid-column: span 2;
  grid-row: span 2;
}