Hola a todo el mundo que ve este tutorial 😄
Hoy les Agrego un breve tema adicion a Css Grids en el cual les muestro una manera mas facil y compacta de acomodar el sistema de grillas y sus “elementos”, vamos a ello:
Que te comento Carnal, si te digo que aun hay una forma mas facil de SIMPLIFICAR todo lo que te vengo resando desde hace rato!
Creo que se te habia olvidado (de nuevo) un estilo mas que coloque en el temario 😄 el cual es siguiente:
grid-area–Lo que hace “grid-area” es juntar “grid-column” y “grid-row” en una sola linea de codigo!!
Impresionante no?, ahora te muestro como se utiliza:
.caja-8{
grid-area: /* Linea de inicio de Fila / Linea de inicio de Columna / Linea de cierre de Fila / Linea de cierre Columna */;
}
Que pasa?, ahora podemos definir tanto el inicio en la fila y columna y el final de las mismas, logrando un cuadro o rectangulo!, vamos a tomar el ejercicio que les deje anteriormente:
.caja-8{
grid-area: 2 / 2 / span 3 / 4;
}
Muy bien, ya les explico:
–Iniciamos la fila en la 2da linea y al mismo tiempo tambien indicamos que inicie la columna en la 2da linea:
|
v
|---|---|---|---|
| x | x | x | x |
-->|---+---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
–Y terminamos indicando que finalize la fila con “span 3” que nos indica que va a finalizar abarcando la 3er fila entera, y tambien indicamos que va a finalizar la columna en la 4ta linea!:
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---|---|
| x | x | x | x |
|---|---|---+---|<--
| x | x | x | x |
|---|---|---|---|
^
|
–Quedandonos como resultado el Ejercicio:
| |
v v
1 2 3 4 5
1|---|---|---|---|
| x | x | x | x |
-->2|---|---|---|---|
| x | | x |
3|---| X |---|
| x | | x |
-->4|---|---|---|---|
| x | x | x | x |
5|---|---|---|---|
Y bueno, solo me hace falta comentar un ultimo detalle o una gran utilidad, que es el hecho de que con esta misma propiedad podemos definir a un solo “elemento o celda” y podremos colocarle el nombre que nosotros decidamos!
Ejemplo:
.caja-8{
grid-area: /* El nombre que tu Quieras*/;
}
Vamos a ponerlo mas claro:
.caja-8{
grid-area: aquiMiCelda;
}
Al enunciar el nombre no hace falta colocarle comillas, asi como se utiliza al dar nombre a una animación, pero, este estilo solamente es para, por decirlo, darle un nombre a esa “celda” para despues utilizar ese nombre en una nuevo estilo que ahora les digo:
grid-template-areas
–Con este nuevo estilo podremos definir de igual manera que como lo hacemos con “grid-template-column o …-row”, nada mas que con la diferencia de que aqui podemos utilizar el nombre de todos los “grid-area” que hallamos definido:
Ejemplo:
.caja-8{
grid-area: aquiMiCelda;
}
.grid-container{
display: grid;
grid-template-areas: 'aquiMiCelda aquiMiCelda aquiMiCelda aquiMiCelda aquiMiCelda'
}
Que es lo que pasa?
–Basicamente lo que hace “grid-template-areas” es solamente haceptar los nombres de las “grid-area” que hallamos establecido.
–Estos nombres van dentro de los apostrofes de comilla simple (’’), lo cual nos indica que todos los nombres que esten dentro pertenecen a una fila.
–Sí nosotros queremos agregar mas filas solo basta con separar con un espacio he iniciar un nuevo conjunto de nombres dentro de los apostrofes de comillas simples (’’).
Ejemplo:
.caja-1 { grid-area: header; }
.caja-2 { grid-area: menu; }
.caja-3 { grid-area: main; }
.caja-4 { grid-area: right; }
.caja-5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header'/* Primera Fila */'menu main main main right right'/* Segunda Fila */'menu footer footer footer footer'; /* Tercera Fila */
}
Aunque nosotros si queremos colocar, por ejemplo que solo abarque 3 de los 5 espacios que tenemos y que esos 3 espacios solo sean los 3 espacios del centro, que termine viendose algo asi:
1 2 3 4 5
1|---|---|---|---|
| x | X | x |
2|---|---|---|---|
| x | x | x | x |
3|---|---|---|---|
| x | x | x | x |
4|---|---|---|---|
| x | x | x | x |
5|---|---|---|---|
Pues muy, facil, solamente para evitar las “celdas” o “espacios” que no queremos abarcar solo basta con colocarles un “punto” (.):
.caja-1 { grid-area: header; }
.caja-2 { grid-area: menu; }
.caja-3 { grid-area: main; }
.caja-4 { grid-area: right; }
.caja-5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'. header header header .'/* Primera Fila */'menu main main . right'/* Segunda Fila */'. . . footer footer'; /* Tercera Fila */
}
Bien, solamente los espacios en los que no deseemos colocar algo, les colocamos un simple punto! 😄
Cabe recalcar, que al utilizar este sistema de Areas, estamos declarando que las “celdas” simpre abarcaran el espacio completo de las mismas y estos llegaran a formar tanto cuadros o rectangulos dependiendo de como el usuario los defina y siempre y cuando las “celdas” sean colindantes.
Te reto a Jugar con este nuevo estilo, ceras que te facilitara o te atrasara mas con tus proyectos, te invito a que copies nuesto ultimo ejemplo para que veas como se ve!!
Sin mas que agregar a este tema, les agradesco que estos tutotiales formen parte de su aprendizaje para mejorar dia con dia.
Saludos.
Lenin Felix.
