11

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 鈥渆lementos鈥 dentro de el sistema de grillas y es en pocas palabras colocarle un 鈥淢argen鈥 a todas las 鈥渃eldas鈥.

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 鈥済rid-column-gap鈥 y 鈥済rid-row-gap鈥:

鈥揅uando utlizamos 鈥済rid-column-gap鈥, como ya he mencionado antes, el estilo sirve para colocar un 鈥渕argen鈥 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, 鈥済rid-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 鈥渟hortcut鈥, el cual ya se los habia mencionado y de segura ya estas pensando en 茅l, pues claro es el 鈥済rid-gap鈥:

鈥揕o que nos ayuda a hacer este estilo es recortar nuestro codigo y establecer tanto en filas como en columnas el 鈥渕argen鈥 que queremos darle:

.grid-container{
	display: grid;

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

Ahora me Explico:

鈥揈n este campo tenemos dos opciones:

1.- En el Campo con 鈥淰alor 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 鈥淐ompartido鈥 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 鈥渕argen鈥 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:

鈥揈sto:

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

Escribe tu comentario
+ 2
2
254Puntos

Gran apoyo. Muchas gracias. Quiero sumar que siempre es importante saber usar padding y margin para centrar los objetos dentro de una lista, el uso de border-box tambien ayuda mucho