Unidad 13. Posicionamiento. Flexbox. Grid (XXXIII)



13.24. Separación entre celdas.Gap

grid-gap es la forma corta de  grid-row-gap y  grid-column-gap, Define una especie de huecos o separación entre celdas de la rejilla, es como si diéramos ancho a las líneas invisibles de la rejilla. No influye en el ancho de las filas y columnas, es un ancho adicional. El gap no se aplica a los bordes exteriores.

Por ejemplo si definimos grid-gap: 6px; obtenemos este resultado:

celda 1.1
celda 1.2
celda 1.3
celda 2.1
celda 2.2
celda 2.3
celda 3.1

 

13.25. Crecer. grid-auto-row

Se pueden añadir más celdas de las especificadas inicialmente, automáticamente se crean los nuevos elementos. Por ejemplo, si especificamos una rejilla con dos columnas y posicionamos un elemento en la tercera columna, no se produce ningún error, se crea de forma automática una nueva columna. Podemos controlar la forma en las que se crean estas nuevas columnas con la propiedad grid-auto-columns, y lo mismo ocurre para las filas con grid-auto-row. De hecho puede ser bastante normal que no sepamos cuantas filas va a tener nuestra rejilla al momento de crearla, pero si sepamos cómo queremos que sean las nuevas filas.

Puede ser interesante definir las columnas y dejar que las filas crezcan según se vayan necesitando pero controlando su altura con grid-auto-row: 100px

Por ejemplo, en la siguiente rejilla hemos definido tres columnas y sólo hemos definido un fila de 40px.

display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 40px

Como hemos creado seis celdas las tres primeras han ocupado la primera fila y las tres siguientes han creado una segunda fila, al no tener definida una segunda fila, esta ha tomado la altura por defecto, es decir, según el contenido, con lo cual una altura de la primera fila definida como 40px no coincide con la segunda fila.

 

Obtenemos:

celda 1.1
celda 1.2
celda 1.3
celda 2.1
celda 2.2
celda 2.3

Si queremos evitar esto y que las nuevas filas tengan la misma altura que la primera basta con indicar grid-auto-rows: 40px de forma que las nuevas filas tengan siempre 40px de altura. Este es el resultado:

celda 1.1
celda 1.2
celda 1.3
celda 2.1
celda 2.2
celda 2.3

En lugar de indicar un tamaño fijo para la fila podemos utilizar max-content y min-content, de esta forma se tomará, respectivamente, el valor mayor de todos los contenidos de las celdas de fila, o el valor menor de todos los contenidos de las celdas de la fila. Es decir toda la fila tendrá la altura de la altura de la celda con mayor altura. Lo mismo podemos decir para las columnas.

13.26. Ordenación. Order

En este vídeo explicamos grid-auto-flow y order:Videotutorial

Como estamos viendo los elementos de una rejilla se van colocando uno tras otro en el orden que los escribimos en el código HTML, salvo que demos su posición explícitamente de las formas que hemos visto. Sin embargo, aún podemos cambiar la distribución de los elementos de otra forma: con la propiedad order: número. Se ordenan primero los elementos que tienen un valor menor de order. Si no se especifica, se considera que el orden es cero.

Es decir, la posición de los elementos viene dada por su posición explícita, a continuación interviene la propiedad order, y si hay empate en el order, se mira el orden en que los escribimos.

Por ejemplo, en la siguiente rejilla no hemos especificado posición explicita, ni order, y hemos escrito los elementos por orden alfabético, por lo tanto el resultado es el siguiente:

A
B
C
D
E
F

Sin embargo en la siguiente rejilla hemos especificado la posición para el elemento E como grid-row: 1; grid-column: 2; hemos dado order: -1 al elemento C y order: 2 al elemento D; a los elementos A, B y F no les hemos asignado ningún order. El resultado es el siguiente:

A
B
C
D
E
F

Este orden es el resultado de aplicar las reglas que acabamos de citar. Primero se colocan los elementos con posición específica, en este caso el elemento E, por cual aparece en la celda especificada; a continuación se colocan por el valor de order, en primera posición el elemento C porque le hemos dado order: -1, a continuación hay tres elementos con el mismo valor cero de order, A, B y F, por lo tanto se colocan en el orden en que los escribimos, y en última posición aparace D porque le hemos dado order: 2.

 

Para practicar lo aprendido realiza el ejercicio Posicionamiento con rejilla

Para saber más sobre los temas de esta unidad ...

Flexbox: W3C, mclibre.org, Flexbox básico, Mozilla cajas flexibles , Ejemplos Flexbox

Alinear elementos de bloque: wextensible

Grid: W3C, CSS-Tricks


 

• Ejercicio propuesto de la Unidad 13 • Prueba evaluativa de la Unidad 13

Enero-2019 (V 2.2)
Pág. 13.33
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.