Ubicación de Elementos en CSS Grid: Grid Column, Grid Row y Grid Area

Ya conoces las propiedaddes del contenedor y las propiedades de alineación. Vamos ahora a conocer las de ubicación.

Cuáles son las propiedades de ubicación

Imaginemos que tenemos una grilla de 4x4 con sólo dos elementos. Podemos moverlos para que ocupen más espacio que una celda, o estén en una celda distinta a la que deberían estar.

Para las columnas, las propiedades que nos van a ayudar son:

• grid-column-start: con esta propiedad nosotros vamos a decirle al elemento en que línea de columna debe comenzar.
• grid-column-end: con esta propiedad nosotros vamos a decirle al elemento hasta que línea de la columna va a llegar.
• grid-column: es una mezcla de grid-column-start y grid-column-end. Los valores que necesita son el valor inicial y el valor final, estos van separados de un “/” (diagonal).

Para las filas las propiedades son iguales, solo que vamos a trabajar en las filas:

• grid-row-start
• grid-row-end
• grid-row

Además de estas propiedades, tenemos:

• grid-area: con esta propiedad declaramos solo una vez donde va a comenzar tanto en columna como en fila y donde va a terminar tanto en columna como en fila.

Cómo agregar las propiedades de ubicación

Vamos al editor de texto para comprender mejor estos conceptos. Primero creamos un contenedor con tres elementos a los que les agregamos clases para poder aplicar estilos individuales a cada uno.

    <div class="contenedor">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
    </div>

En nuestro archivo CSS llamamos al contenedor con su clase y le aplicamos propiedades similares a las que hemos trabajado anteriormente.

Ajustamos el ancho de fuente en 4rem para todas las clases.
Le damos un borde y color de fondo distinto a cada elemento del contenedor para poder diferenciarlo.

.contenedor {
    border: 5px solid #e1bee7;
    background-color: white;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 75px 75px 75px;
    place-content: center;
}
.item {
    font-size: 4rem;
}
.item-1 {
    border: 5px solid #f8bbd0;
    background-color: #ffeeff;
}
.item-2 {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
}
.item-3 {
    border: 5px solid #b2ebf2;
    background-color: #e5ffff;
}

Item 1

Ahora, editemos el primer elemento para que ocupe todo el ancho de la primera fila. Debe empezar a numerar los elementos de izquierda a derecha.

Mucho ojo, el número no es la columna en sí, sino la línea en que termina la columna. Entonces si queremos que ocupe hasta la tercera celda, tendremos que colocar grid-column-end: 4.

.item-1 {
    border: 5px solid #f8bbd0;
    background-color: #ffeeff;
    grid-column-start: 1;
    grid-column-end: 4;
}

Item 2

En este caso queremos que ocupe la primera celda de las filas 2 y 3 dentro de la primera columna. Como la primera fila ya está ocupada, debemos empezar de la fila 2 y terminar en la 4.

grid-row: 2/4

Item 3

El tercer item ocupa tanto filas como columnas, por lo que conviene usar grid-area. El orden en que debemos colocar el valor es: fila y columna en que empieza, fila y columna en que termina.

.item-3 {
    border: 5px solid #b2ebf2;
    background-color: #e5ffff;
    grid-area: 2/2/4/4;
}

¿Existen atajos para usar las propiedades?

Podemos usar grid-template-areas para acomodar todos los elementos con mucha más rapidez. grid-template-areas declaramos areas dentro de la grilla.

Para ello, agregamos la información a la tabla como si fuera dentro de una grilla, de esta manera:

.contenedor {
    border: 5px solid #e1bee7;
    background-color: white;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 75px 75px 75px;
    grid-template-areas: 
        "header header header"
        "side main main"
        "side main main";
    place-content: center;
}

Luego, colocamos el nombre de la celda creada anteriormente a cada item.

}
.item-1 {
    border: 5px solid #f8bbd0;
    background-color: #ffeeff;
    grid-area: header;
}
.item-2 {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    grid-area: side;
}

Completa este reto

Aprendiste varias formas de llegar a un mismo resultado. Ya sólo te queda jugar para seguir practicando lo aprendido. Pero adivina, te tengo un reto para ello.

Debes recrear la grilla que ves en al siguiente imagen. Estás en la total libertad de usar el método que consideres el mejor o simplemente el que quieras usar. Recuerda que en programación no hay una sola manera de lograr las cosas.

Contribución creada por: José Miguel Ventimilla (Platzi Contributor) con aportes de Josué Ramírez Hernández.