7

Mejores técnicas de posicionamiento con CSS Grid Layout

Ya que terminaste el curso de CSS Grid Layout, te habrás dado cuenta que esta herramienta tiene muchas formas de usar la grilla para posicionar los elementos. Aquí te muestro las mejores cuatro formas de posicionar elementos en grid que puedes usar, cada una con sus ventajas y desventajas. Para ello intentaremos crear la misma figura usando las diferentes técnicas. Puedes ver el código usado en los ejemplos en mi repositorio de GitHub y te dejaré un live view de los ejemplos.

Antes de empezar debes conocer cómo lo haremos, cuando un elemento padre tiene un display grid, sus hijos automáticamente desbloquean las opciones de grid-column y grid-row, con las cuales les puedes indicar la posición que quieres que tengan.

Grid Column

	grid-column-start: /*indicas donde debe empezar el ítem en el eje de columnas*/
	grid-column-end: /*indicas donde debe terminar el ítem en el eje de columnas*/
	grid-column: /*es la propiedad resumida, debes indicar primero donde inicia y luego donde termina separados por una diagonal / */

Grid Row

grid-row-start: /*indicas donde debe empezar el ítem en el eje de filas*/grid-row-end: /*indicas donde debe terminar el ítem en el eje de filas*/grid-row: /*es la propiedad resumida, debes indicar primero donde inicia y luego donde termina separados por una diagonal "/" */

Ojo, cabe aclarar que el ítem se posicionará basado en las líneas iniciales de cada eje, si esto suena algo extraño ya lo entenderás. Ahora que ya sabes qué son estas propiedades, es hora de saber cómo utilizarlas.

Número de líneas

Con esta técnica le indicas directamente al item hijo su posición en el eje que tú deseas. Veamos un ejemplo, quiero crear esta grilla para mi web:

Captura de pantalla 2021-04-12 124422.jpg

Para eso debo crea una grilla de 4x4 y 4 ítems.

    <section class="start-end">
      <divclass="item item-1"></div>
      <divclass="item item-2"></div>
      <divclass="item item-3"></div>
      <divclass="item item-4"></div>
    </section>

.start-end {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

Listo, ahora tengo una grilla simple con 4 hijos, para hacerlo un poco más fácil de entender agregué color a los ejemplos. Entonces creamos los estilos para el primer ítem de nuestro grid, usando grid-column y grid-row para indicar su posición usando como referencia el número de líneas de nuestro grid.

.item-1 {
  background-color: pink;
  border: hotpink 4px solid;
  grid-row: 3 / 4;
  grid-column: 4 / 5;
}

Y ahora puedes ver cómo el primer hijo se ubicó en esta posición.

Captura de pantalla 2021-04-12 125447.jpg

Vamos a hacer lo mismo el segundo ítem.

.item-2 {
  background-color: skyblue;
  border: blue 4px solid;
  grid-row: 1 / 3;
  grid-column: 2 / 4;
}

Y tu grid ahora luce de esta manera.

Captura de pantalla 2021-04-12 125917.jpg

Grid cuenta con dos ejes similares a un plano cartesiano, su eje positivo de filas y columnas empieza de arriba hacia abajo, de izquierda a derecha, como nuestro sistema de escritura. También tiene una versión negativa de estos ejes que van hacia el lado contrario, de abajo hacia arriba, de derecha a izquierda, estos ejes también pueden ser usados para alinear ítems, cómo vamos a hacer con el tercer ítem.

.item-3 {
  background-color: mediumaquamarine;
  border: green 4px solid;
  grid-row: -3 / -1;
  grid-column: -4 / -3;
}

Y ahora tu grid luce así:
Captura de pantalla 2021-04-12 130500.jpg
También usar ambos números combinados, como lo haré con el último ítem.

.item-4 {
  background-color: plum;
  border: purple 4px solid;
  grid-row: 2 / -2;
  grid-column: -5 / 3;
}

Y listo tu grid está terminada.
Captura de pantalla 2021-04-12 164822.jpg

Expandir ítems

En lugar de darle una línea final, puedes decirle cuántas casillas del grid quieres que el elemento se expanda, esta técnica solo te permite expandir los ítems en la dirección positiva de los ejes. Para eso ocupamos la palabra span y el número de casillas que quieres expandir el objeto, recuerda que esto solo sirve para indicar el número de casillas que abarca y no el número específico de línea donde termina o empieza, así que de todos modos hay que indicar en qué línea comienza.

Creo la grilla

.expand {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

Y ahora voy a cambiar todos las líneas finales por casillas de expansión para crear la misma grilla que hicimos antes.

.item-5 {
  background-color: pink;
  border: hotpink 4px solid;
  grid-row: 3 / span 1;
  grid-column: 4 / span 1;
}

.item-6 {
  background-color: skyblue;
  border: blue 4px solid;
  grid-row: 1 / span 2;
  grid-column: 2 / span 2;
}

.item-7 {
  background-color: mediumaquamarine;
  border: green 4px solid;
  grid-row: -3 / span 2;
  grid-column: -4 / span 1;
}

.item-8 {
  background-color: plum;
  border: purple 4px solid;
  grid-row: 2 / span 2;
  grid-column: -5 / span 2;
}

Y el resultado es el mismo que antes.
Captura de pantalla 2021-04-12 165650.jpg
Esta técnica es muy útil si tu web va a incorporar más elementos utilizando grid implícito y de esta forma el navegador sabrá cuántas casillas ocuparán los nuevos elementos.

Areas

Grid nos permite nombrar ciertas áreas del grid, así como crear un mapa del mismo grid, para crear un mapa virtual algo parecido a esto.

Image_3.png

Eso se logra nombrando las áreas previamente definidas del grid padre de esta manera.

.areas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    ".      azul azul       .""morado azul azul       .""morado verde  .    rosa"".      verde  .      .    ";
}

Si te das cuenta, en el atributo grid-template-areas, creé un pequeño grid y nombre las áreas en orden de cómo se verán, y las que no tienen nombre simplemente las nombré con un punto. Ahora es momento de indicarles a cada ítem su lugar en la grilla.

.item-9 {
  background-color: pink;
  border: hotpink 4px solid;
  grid-area: rosa;
}

.item-10 {
  background-color: skyblue;
  border: blue 4px solid;
  grid-area: azul;
}

.item-11 {
  background-color: mediumaquamarine;
  border: green 4px solid;
  grid-area: verde;
}

.item-12 {
  background-color: plum;
  border: purple 4px solid;
  grid-area: morado;
}

Y el grid luce así:
Captura de pantalla 2021-04-12 170533.jpg

No encontré la forma de hacer que un ítem se traslapara con otro, así que si eso es lo que quieres lograr es que se coloquen uno tras otro esta no es la mejor opción, pero es una forma más visual de dar lugar a las cosas. Además algunos la usan para crear grids que se adapten de forma responsiva más fácil. Un dato curioso es que funciona incluso con grid implícito.

Extra: Nombrar líneas

Esta es una técnica que es, para mí, de lo más divertido y claro que puedes usar. Sí, puedes ponerle nombre a las líneas que hay entre las filas y columnas, y de esta forma decirle de forma explícita de que línea el contenido debe ocupar. Y para hacer eso tienes que usar los atributos del padre, y nombrar las líneas utilizando [ y ] de esta manera:

.names {
  display: grid;
  grid-template-columns: [primera-columna] 1fr [segunda-columna] 1fr [tercera-columna] 1fr [cuarta-columna] 1fr [final-columna];
  grid-template-rows: [primera-fila] 1fr [segunda-fila] 1fr [tercera-fila] 1fr [cuarta-fila] 1fr [final-fila];
}

Y luego utilizamos la primera técnica pero en lugar de colocar los número de la línea usamos el nombre.

.item-13 {
  background-color: pink;
  border: hotpink 4px solid;
  grid-column: cuarta-columna / final-columna;
  grid-row: tercera-fila / cuarta-fila;
}

.item-14 {
  background-color: skyblue;
  border: blue 4px solid;
  grid-column: segunda-columna / cuarta-columna;
  grid-row: primera-fila / tercera-fila;
}

/* podemos combinar las otras técnicas*/.item-15 {
  background-color: mediumaquamarine;
  border: green 4px solid;
  grid-column: segunda-columna / 3;
  grid-row: tercera-fila / span 2;
}

.item-16 {
  background-color: plum;
  border: purple 4px solid;
  grid-column: 1 / tercera-columna;
  grid-row: segunda-fila / span 2;
}

Y tu grid ahora luce así:

Captura de pantalla 2021-04-12 171605.jpg

¡Listo! 😀 Ahora dominas los cuatro elemen… las cuatro técnicas para posicionar ítems en CSS Grid Layout. Los enlaces al repositorio y a el live view para que puedas verlo en acción lo dejé en la parte de arriba. Una técnica que te puede ayudar mucho es usar las herramientas de desarrollador de Chrome presionando F12 para abrirlas, para saber más, puedes tomar nuestro curso de Curso de Debugging con Chrome DevTools. Que tengas un buen día ¡compañera desarrolladora!

Escribe tu comentario
+ 2
2
3923Puntos

Excelente 👏👏👏