Unidad 13. Posicionamiento. Flexbox. Grid (XXIV)



13.16. Identificar celdas de la rejilla

 

Como hemos visto, si no decimos otra cosa, los elementos se van colocando uno tras otro en los elementos de la rejilla, pero es mucho más últil dar la posición de un elemento explícitamente. Esto podemos hacerlo de varias formas. Para explicarlo vamos a utilizar el siguiente esquema con tres filas y tres columnas.

Al definir una rejilla se crean de forma implicita las líneas y columnas que la componen, aunque estas líneas y columnas no se ven, existen. Y podemos usarlas para definir posiciones de varias formas.

La forma más sencilla de definir la posición de un elemento en una rejilla es indica el número de la fila con grid-row, y el número de la columna con la propiedad: grid-column.

Por ejemplo, si tenemos la rejilla del esquema anterior con 3 filas y 3 columnas definida con este código:

display: grid; grid-template-rows:  repeat(3, 1fr); grid-template-columns:  repeat(3, 1fr); 

Para colocar un contenedor div en la fila 1, columna 2, escribimos: grid-row: 1; grid-column: 2;


Enero-2019 (V 2.0)
Pág. 13.24
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

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


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