CSS Grids - Separación de Celdas

Hola a Todos 😄 una vez mas por aqui traiendoles mas información!

En este ocasion hablaremos de algo muy util a la hora de la disposción de los “elementos” dentro de el sistema de grillas y es en pocas palabras colocarle un “Margen” a todas las “celdas”.

Bien, para esto tenemos tres lineas de estilos que se usaran especialmente para el mismo sistema:

grid-column-gap
grid-row-gap
grid-gap

Vamonos despacito y empezemos por lo que son “grid-column-gap” y “grid-row-gap”:

–Cuando utlizamos “grid-column-gap”, como ya he mencionado antes, el estilo sirve para colocar un “margen” entre las columnas,

Ejemplo:

.grid-container{
	display: grid;

	grid-column-gap: 50px;
}

Aqui, lo que estamos diciendo solamente es que va a haber un espacio de “50px” entre TODAS las columnas del grid:

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

Ven, simplemente eso nos ayuda a que podamos dar un espaciado como nosotros queramos, cabe recalcar que este estilo funciona con cualquier medida que le demos, ya sean en pixeles, porcentajes, ems, etc…

Muy bien, facil no?

Bien, ahora le muestro lo mismo pero volteado, “grid-row-gap”:

.grid-container{
	display: grid;

	grid-column-row: 35%;
}

Es simple, ahora lo que pasara es que se les dara un margen a todas las filas de la grilla:

					|---|---|---|---|

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

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

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

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

			    |---|---|---|---|

Pero bueno, de esta manera podemos colocar y combinar los estilo para dar un mejor toque al asunto!

Por que no los combinamos a ver que pasa:

.grid-container{
	display: grid;

	grid-column-colmun: 4em;
	grid-column-row: 25%;
}

Ahora veamos los resultados:

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

Que tal he?, facil?, yo digo que es pan comido para ti! 😄

Pero por que no ahora vemos una forma de trabajar con los dos juntos con un “shortcut”, el cual ya se los habia mencionado y de segura ya estas pensando en él, pues claro es el “grid-gap”:

–Lo que nos ayuda a hacer este estilo es recortar nuestro codigo y establecer tanto en filas como en columnas el “margen” que queremos darle:

.grid-container{
	display: grid;

	grid-gap: /* Un Valor general | Valor para filas "row" / Valor para columnas "column" */;
}

Ahora me Explico:

–En este campo tenemos dos opciones:

1.- En el Campo con “Valor General”, que lo que realmente y sencillamente se entiende que si solo colocamos un solo valor, ese valor va dirigido tanto para columnas como filas:

.grid-container{
	display: grid;

	grid-gap: 75px;
}

2.- En el campo “Compartido” podemos declarar en especifico el valor para cada instancia:

.grid-container{
	display: grid;

	grid-gap: 3em / 45%;
}	

Y aqui es como les declaraba la sintaxis allá ^ arriba, el primer valor corresponde al valor del “margen” sobre las filas y el segundo valor va dirigido a las columnas.

NOTA: Simplemente para separar los valores basta con una simple barra en diagonal (/).

Ejemplo:

–Esto:

.grid-container{
	display: grid;

	grid-gap: 40% / 115px;
}

Es lo mismo que esto:

.grid-container{
	display: grid;

	grid-column-colmun: 115px;
	grid-column-row: 40%;
}

Perfecto! 😄

Espero que esto les sirva para seguir con mas proyectos y asi dominar el tema mas a fondo.

Saludos.
Lenin Felix.