Unidad 13. Posicionamiento. Flexbox. Grid (XXVIII)



13.19. Nombrar líneas de la rejilla

En rejillas complejas pueden ser confusos los números de líneas, otra forma de nombrar las líneas es darles nombres.

Para dar un nombre a una línea lo escribimos entre corchetes delante (y detrás) de su definición de columna, por ejemplo, en el siguiente código definimos dos columnas de 2fr y 1 fr; y damos el nombre "inicio" a la primera línea, el nombre "lateral" a la segunda línea, y el nombre "final" a la tercera línea. grid-template-columns: [inicio] 2fr [lateral] 1fr [final];

De esta forma para definir la columna de la celda 1.2, en notación de líneas, escribiremos grid-colum: 2 / 3

En notación con el nombre de líneas escribimos grid-column: lateral / final

Como sabemos, si sólo ocupa una columna, esto también se puede escribir omitiendo la segunda línea, puesto que por defecto se aplica un span de 1, con lo cual, quedaría, grid-colum: 2, o grid-column: lateral

Todo esto se aplica igual a las filas. Obviamente, podemos dar nombre sólo a las líneas que queramos, no es necesario hacerlo para todas las líneas.

Puesto que una línea es el comienzo de una columna (o fila) y el comienzo de otra, podemos dar dos nombres a la misma línea y utilizar el nombre más adecuado en cada caso, por ejemplo. grid-template-rows: [cabecera] 50px [principal fila_lateral] 100px [pie] 50px; [fin-pie] a la segunda línea le hemos dado los nombres de "principal" y "fila_lateral" para que quede más clara la definición del área lateral de la siguiente rejilla.

 

<div style=" display: grid; grid-template-columns: [inicio] 2fr [lateral] 1fr; 
		grid-template-rows: [cabecera] 50px [principal fila_lateral] 100px [pie] 50px; [fin-pie]">
		<div style="grid-row: cabecera;
			grid-column: inicio;">cabecera</div>
		<div style="grid-row: principal;
			grid-column: inicio;">principal</div>
		<div style="grid-row: fila_lateral / fin_pie;
			grid-column: lateral; ">lateral</div>
		<div style="grid-row: pie;
			grid-column: inicio; ">pie</div>
</div>
cabecera
principal
lateral
pie

 


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






Página inicial  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.