CSS Grids - Acomodar Celdas

Hola de nuevo 😄, Ahora Continuemos con nuestro tema de Sistema de Grillas Con Css!!

Una vez que sabemos como colocar correctamente nuestro sistema, ahora tenemos la tarea de como colocarle mas estilos especificos para que nos quede muy chevere!!

Ahora me explico:

–Nosotros ya sabemos como agregar tantas columnas y tantas filas como queramos, pero aun falta definir como se comportan los mismos elementos dentro del sistema, para ello vamos a echarle un vistaso a estos nuevos estilos:

grid-column
	grid-column-start
	grid-column-end

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

Oye, pero que haces esas cosas?, Muy facil, vamos a comenzar por “grid-columns”:

–“grid-columns-start” nos permite fijar el inicio del “elemento o caja o celda (como mas te acomodes)”, es decir, desde donde comenzará la columna.

–“grid-columns-end” nos permite fijar el final del “elemento”, es decir, hasta donde finalizara la columna.

Sí nosotros ya tenemos definida nuestro sistema de grillas en HTML:

<div class="grids">
	<div class="caja caja-1">1</div>
	<div class="caja">2</div>
	<div class="caja">3</div>
	<div class="caja">4</div>
	<div class="caja caja-5">5</div>
	<div class="caja">6</div>
	<div class="caja">7</div>
	<div class="caja">8</div>
	<div class="caja caja-9">9</div>
	<div class="caja">10</div>
	<div class="caja">11</div>
	<div class="caja caja-12">12</div>
</div>

Y que posiblemente nos quede algo como esto:

			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|

Podemos notar, que ademas de la clase “caja”, que es la clase que nos permitio agregarle estilos hogareños a cada “elemento”, aparte tambien definimos una clase mas que llame “clase-n” (con “n” me refiero a un numero) lo cual nos ayudara con este nuevo estilo que les estoy comentando:

.caja-1{
	grid-column-start: 1;
	grid-column-end: 3;
}

Pero, que rayos es eso?, te explico:

–Al indicar que la clase “caja-1” tiene esos nuevos estilos, indicamos que con “grid-column-start: 1;” este “elemento o caja” iniciara desde la primera posición; muy bien?, ya lograras entender mejor!.
–Y al colocar “grid-column-end” estamos declarando que este mismo elemento terminara en la tercera posición; ahora te quedo bastante claro?.

Y nos tendra que quedar algo como esto:

			    |---|---|---|---|
					|   X   | x | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|

Ahora que ya agrego un poco mas de esque demostrativo, ya te quedan mejor las ideas no? 😄

Bueno, podras observar que la clase “caja-1” ahora abarca 2 espacios!, pero ahora entras en duda, por que?, ahi viene tu pregunta:

–Pero que no habias declarado que iniciabas en la “celda” 1 y terminabas en la “celda” 3?, que no te quedaria algo asi:

			    |---|---|---|---|
					|     X     | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|
					| x | x | x | x |
			    |---|---|---|---|

Pero bueno, es aqui donde te preguntaba si habia quedado muy claro con el tema?, no?, bueno, aqui te viene la explicación de por que nos es como tu lo pensaste:

Primero que nada debo dejar este tema muy claro:

–El sistema de Grillas Css, sabemos que podemos colocar tantas filas como columnas deseemos, pero te preguntaras, como es que de definen los lugares?, es algo facil de entender como una variable “Array”, Me explico:

Al nosotros declara nuestro sistema de Grillas con “grid-template-columns” con 4 columnas y “grid-template-rows” con 4 filas nos vendria quedando algo asi:

					1		2		3		4		5
			   1|---|---|---|---|
					| x | x | x | x |
			   2|---|---|---|---|
					| x | x | x | x |
			   3|---|---|---|---|
					| x | x | x | x |
			   4|---|---|---|---|
					| x | x | x | x |
			   5|---|---|---|---|

Muy bien (me diverti haciendo ese esquemita 😄), vamos a representar que las “X” son las “cajas o celdas”, ok?, vamos despacito!

–Y por que los numeros?, bien, lo que quiero explicar aqui es que en el sistema se cuentan las lineas de colisión, me explico:

Nosotros vemos que coloque en la cuadricula unos numero que van desde el 1 al 5, tando de forma vertical como horizontal, esos numero son los que tomamos en cuenta cuando utilizamos los estilos antes mencionados que son “grid-column-start” y “grid-column-end”, para que queda mas claro te lo explico mas deees… paaa… cito!!

Ejemplo:

–Nosotros al colocar “grid-column-start: 1;” estamos diciendo que va iniciar en el primer espacio no?, pues ahora ubica el primer espacio o ya entrando con el tema, iniciamos contando desde la primera “linea”:

					|
					v
					1		2		3		4		5
			   1|---|---|---|---|
					| x | x | x | x |
			   2|---|---|---|---|

–Y tambien colocamos nuestro segundo estilo “grid-column-end” con el cual mencionabamos mi chato! que iba a terminar en la tercera posición, pero ahora le vamos a llamar en la “tercera linea”:

					|       |
					v       v
					1		2		3		4		5
			   1|---|---|---|---|
					| x | x | x | x |
			   2|---|---|---|---|

–Y para finalizar ya te habras dado cuenta que que nuestro grid queda como ya antes lo comente!:

					|       |
					v       v
					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|---|---|---|---|

“Esta Palabra 😄”

Muy bien, ahora ya entendiste!!! Ves que es muy sencillo, es muy similar a como se cuentan los “espacios o lugares o posiciones” dentro de un “Array”, pero si no te quedo claro, regresate unos 6 parrafos arriba y vuelve a chutar (leer) desde ese punto hasta “esta palabra” 😄

Perfecto!, ahora sabes como hacerle para que una “celda” abarque mas espacios!, pero ahora te estaras preguntando!, Oye Carnal y que onas con tus estilos de “grid-row-start” y con el “grid-row-end”, hee carnal, que pasa con ellos, hee? 😄

Bueno, pues como lo dije alguna vez, Es el mismo huevo estrellado pero volteado!

Te reto a que utilizes utilices los estilos de “grid-row-start” y “grid-row-end” con la clase “caja-5” y ahi me platicas que es lo que viste de extraño en la grilla!

Pero no te apures, aun me falta unos estilos que a lo mejor ya se te olvidaron:

grid-column

grid-row

Pues que crees?, como ya hablamos de “grid-column-star” y “grid-column-end”, y los mismo para “row”, ahora te comento que hay una manera de resumir esos dos estilos en una sola linea!

Pues claro, con sus respectivos estilos!, ahi te va el ejemplo, checate!!:

.caja-5{
	grid-column: 1 / 3;
}

😮 Que paso aqui mijo?

Como lo decia “grid-column” y “grid-row” es la version simplificada de las dos lineas de “start y end”, lo cual nos permite colocar en una sola linea el inicio y el fin de la “celda”, me explico:

.caja-5{
	grid-column: /* Linea de Inicio / Linea de Cierre */;
}

Simplemente colocamos el numero de la linea donde queremos que inicie y el numero de la linea final donde queremos que finalice, cabe recalcar que para separar estos numeros de inicio y final lo hacemos con una “Barra Diagonal (/)”, facil no?, te lo dejo mas claro:

Esto:

.caja-5{
	grid-column: 1 / 3;
}

Es lo mismo que esto:

.caja-5{
	grid-column-start: 1;
	grid-column-end: 3;
}

Y que Ondas con el “grid-row” carnal?, pues te lo repito, ES LO MISMO PERO VOLTEADO!!

Te reto a que cambies lo que realizaste con “grid-row-start y …-end” por “grid-row”, sera tan sencillo como quitarle la dentadura a un abuelo!

Muy bien ahora vamos agregarle una pequeña propiedad para que podamos rompernos un poco mas nuestra cabeza!

Como ya mencione antes, podemos utilizar la version simplificada de “grid-column” o “grid-row”, lo cual nos permite colocar el inicio y el final de las celdas, pero te preguntaras:

Que pasa si quiero que mi celda tambien abarque la “casilla o espacio” 3 de la grilla?

Vamos a tomar el Ejemplo que teniamos con la clase “caja-5”:

–Tendriamos que colocar la sintaxis de la siguente manera:

.caja-5{
	grid-column: 1 / 4;
}

Y nos quedaria de la siguiente manera:

					|           |
					v           v
					1		2		3		4		5
			   1|---|---|---|---|
					|     X     | x |
			   2|---|---|---|---|
					| x | x | x | x |
			   3|---|---|---|---|
					| x | x | x | x |
			   4|---|---|---|---|
					| x | x | x | x |
			   5|---|---|---|---|

–Como puedes observar, ahora esta finalizando la “celda” hasta la linea 4, lo que por defecto nos esta dando el resultado que nosotros queremos, no?

Pero que pasa sí ahora te comento que exite una forma distinta de hacer lo mismo, y lograrias que tu lógica que tenias al iniciar con el tema sea VERDARERA, te lo explico rapido:

–Nosotros para lograr el mismo resultado, tambien podemos colocar el valor de “span” antes del numero que indicamos para finalizar la “celda”: ejemplo:

Esto:

.caja-5{
	grid-column: 1 / 4;
}

Seria lo mismo que colocar:

.caja-5{
	grid-column: 1 / span 3;
}

Ahora entiendes mejor?, lo que hacemos con el atributo “span” es indicar que no finalize en la final numero 3:

					|       |
					v       v
					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|---|---|---|---|

Sí no que finalize ABARCANDO el espacio 3:

					|           |
					v           v
					1		2		3		4		5
			   1|---|---|---|---|
					|     X     | x |
			   2|---|---|---|---|
					| x | x | x | x |
			   3|---|---|---|---|
					| x | x | x | x |
			   4|---|---|---|---|
					| x | x | x | x |
			   5|---|---|---|---|

Mejor?, ahora podemos declarar de forma que entendamos mejor el como abarcan las “celdas” dentro de la grilla (o por lo menos asi me queda claro a mi 😄).

Bueno, seguimos con el tema, ahora te explico algo muy facil:

–Nosotros podemos combinar tanto “grid-column” con “grid-row”, pero hay que ser cuidadosos con este tema, por que de la manera mas facil (o por lo menos lo mas logico que se ve) es que SIEMPRE tienes que formas cuadros o rectangulos, NADA DE HACER cosas raras como “L” o “T”, ejemplo:

.caja-5{
	grid-column: 1 / span 2;
	grid-row: 1 / 4;
}

Que vamos a lograr con esto:

					|       |
					v       v
					1		2		3		4		5
			-->1|---|---|---|---|
					|       | x | x |
			   2|       |---|---|
					|   X   | x | x |
			   3|       |---|---|
					|       | x | x |
			-->4|---|---|---|---|
					| x | x | x | x |
			   5|---|---|---|---|

Me explico:

Con “grid-column: 1 / span 2;” estamos indicando que incie desde la primera “linea” y que finalize abarcando el espacio 2! con esto abarca dos columnas enteras!
Y con “grid-row: 1 / 4;” indicamos que inicie desde la “linea” 1 y que finalize en la “linea” 4, abarcando solamente los espacios de 3 filas!

Te reto a que pracriques por tu cuenta y veas como obtienes el Siguente resultado:

					    |       |
					    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 esto a sido todo por el momento, espero les alla ayudado mucho mas a completar su propio sistema de grilla de Css y seguir aprendiendo sobre CSS Grids, cabe recalcar que la practica hace al maestro!

Saludos.
Lenin Felix.