CSS Grid - Layout 2D

CSS Grid es bidimensional: controla filas Y columnas al mismo tiempo. Es perfecto para layouts complejos de página completa. Con grid-template-columns defines cuántas columnas y su tamaño, grid-template-rows las filas. La unidad fr (fracción) distribuye el espacio disponible proporcionalmente.

La función repeat() evita repetir definiciones: repeat(3, 1fr) crea 3 columnas iguales. grid-column y grid-row permiten que un elemento ocupe múltiples celdas. grid-template-areas permite nombrar zonas del grid y asignar elementos a ellas por nombre, haciendo el layout extremadamente legible.

/* GRID CONTAINER */
.layout {
  display: grid;
  
  /* Definir columnas */
  grid-template-columns: 200px 1fr 1fr; /* 3 cols */
  grid-template-columns: repeat(3, 1fr); /* 3 iguales */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  
  /* Definir filas */
  grid-template-rows: 80px 1fr 60px;
  
  /* Espacio entre celdas */
  gap: 20px;
  column-gap: 20px;
  row-gap: 10px;
}

/* POSICIONAR ELEMENTOS EN EL GRID */
.header {
  grid-column: 1 / -1;  /* ocupa todas las columnas */
}

.sidebar {
  grid-column: 1 / 2;   /* columna 1 */
  grid-row: 2 / 3;      /* fila 2 */
}

.main {
  grid-column: 2 / -1;  /* columnas 2 hasta el final */
}

/* LAYOUT CLÁSICO CON ÁREAS */
.pagina {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}