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 útil 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 implícita 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;
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.