Colocar elementos en la cuadrícula — CSS: Diseño con Grid

• Líneas de la Cuadrícula
• Ubicando elementos con grid-column y grid-row
• Usando span para simplificar el código
• Creando áreas con nombres (grid-template-areas)

En la lección anterior, construimos una cuadrícula de 12 columnas donde cada elemento ocupaba solo una columna y estaba alineado de izquierda a derecha. Pero, en un diseño real, rara vez necesitamos que todos los elementos se dispongan de esta manera. Normalmente, algunos elementos ocupan más espacio que otros.

Líneas de la Cuadrícula

🤔 ¿Cómo sabemos dónde ubicar los elementos?

Para organizar los elementos dentro de la cuadrícula, trabajamos con las llamadas líneas de la cuadrícula (grid lines). Cada línea en la cuadrícula tiene un número de orden, tanto horizontal como verticalmente. Y lo interesante es que hay dos formas de numerarlas:

• De izquierda a derecha (o de arriba hacia abajo) → Usamos números positivos: 1, 2, 3...
• De derecha a izquierda (o de abajo hacia arriba) → Usamos números negativos: -1, -2, -3...

Veámoslo con una cuadrícula simple:

Aquí puedes notar que:

• La primera línea vertical se llama 1 (y también -5, si contamos al revés).
• La última línea horizontal se llama 4 (y también -1 desde abajo).

Estos números nos permiten posicionar elementos con mucha precisión en la cuadrícula.

Ubicando elementos con grid-column y grid-row

Vamos a trabajar con la cuadrícula de 12 columnas que creamos antes y la organizaremos de la siguiente manera:

1. El primer elemento abarcará todas las 12 columnas y ocupará 2 filas de alto.
2. El segundo elemento estará debajo de ese y solo tomará 4 columnas de ancho.
3. El tercer elemento tomará las 8 columnas restantes al lado del segundo.

Para lograr esto, usamos 4 propiedades clave en CSS Grid:

.grid-header {
  grid-column-start: 1;
  grid-column-end: 13;  /* Hasta el final de la cuadrícula (12 columnas) */
  grid-row-start: 1;
  grid-row-end: 3;    /* Ocupará 2 filas */
}

.grid-aside {
  grid-column-start: 1;
  grid-column-end: 5;  /* Ocupa 4 columnas */
  grid-row-start: 3;
  grid-row-end: 13;
}

.grid-main {
  grid-column-start: 5; /* Empieza al lado del aside */
  grid-column-end: 13;
  grid-row-start: 3;
  grid-row-end: 13;
}

¿Un truco útil? Podemos usar valores negativos en grid-column-end y grid-row-end para hacer que los elementos se expandan automáticamente hasta el final de la cuadrícula.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Usando span para simplificar el código

En lugar de decir explícitamente en qué línea termina un elemento, podemos decirle cuántas columnas o filas debe ocupar usando span:

.grid-header {
  grid-column: 1 / -1;  /* Ocupa toda la fila */
  grid-row: 1 / span 2; /* Ocupa 2 filas */
}

.grid-aside {
  grid-column: 1 / span 4; /* Ocupa 4 columnas */
  grid-row: 3 / -1; /* Se expande hasta el final */
}

.grid-main {
  grid-column: 5 / -1;  /* Ocupa el resto de la cuadrícula */
  grid-row: 3 / -1;
}

Mucho más fácil de entender, ¿verdad?

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Creando áreas con nombres (grid-template-areas)

.grid-6 {
  display: grid;
  grid-template-areas: 
    "header header header header header header"
    "aside  aside  main   main   main   main";
}

.grid-header { grid-area: header; }
.grid-aside { grid-area: aside; }
.grid-main { grid-area: main; }

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen