Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.
Antes:$249
Termina en:
01d
18h
00m
10s
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:
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.
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.
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í:
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.
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.
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.
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í:
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í:
¡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!
Excelente 👏👏👏