Unidad 13. Posicionamiento. Flexbox. Grid (XXVIII)

13.19. Nombrar líneas de la rejilla

En este vídeo explicamos cómo nombrar las 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.

Salvo para la primera y última línea, se puede considerar que una línea es el comienzo de una columna (o fila) y también el fin de otra, por lo tanto, 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>

 Cursos Informática Gratuitos