Unidad 13. Posicionamiento. Flexbox. Grid (XXVII)

13.18. Rejilla. Áreas

En este vídeo explicamos cómo definir la rejilla con áreas:

Otra forma más de fusionar celdas (o definir un área) es utilizar la notación de áreas, que es una forma compacta de la notación de líneas que ya hemos visto para filas y columnas, grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; es decir, para describir un área damos su esquina superior izquierda y su esquina inferior derecha.

Por ejemplo para obtenar la misma fusión de celdas que en el ejemplo anterior habiamos creado con grid-row: 3 / span 2; grid-column: 2 / span 3; ahora la creamos con grid-area: 3 / 2 / 5 / 5

 

Pero las áreas tienen otra utilidad muy interesante, se puede dar un nombre a un área con grid-area: nombre y luego utilizar la propiedad grid-template-area para asignar ese nombre a celdas de la rejilla según una nomenclatura específica.

Lo vamos a ver con un ejemplo que puedes ver en este enlace: area1.html

Con esta plantilla de área:

"cab  cab   ."
"prin prin lat"
"prin prin lat"
"pie  pie  lat"

Obtenemos un resultado como el que muestra la siguiente imagen:

En el código correspondiente, en la parte de HTML, definimos los contenedores div con las correspondientes clases.

<div class="grid">
  <div class="cabecera">Cabecera</div>
  <div class="principal">Principal</div>
  <div class="lateral">Lateral</div>
  <div class="pie">Pie</div>
 </div>

A continuación en la hoja de estilos declaramos los estilos y les asignamos un nombre de área. (Omitimos los colores de fondo)

.cabecera { grid-area: cab;  }
.principal { grid-area: prin; }
.lateral { grid-area: lat; }
.pie { grid-area: pie; }

A continuación declaramos la rejilla y definimos tres columnas y cuatro filas como ya sabemos, y a continuación definimos la plantilla del área con la propiedad grid-template-area

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px 100px 50px;
    grid-template-areas: 
 	  "cab  cab   ."
		  "prin prin lat"
		  "prin prin lat"
		  "pie  pie  lat";
    }

Como vemos la posición de los nombres de área en la plantilla se corresponde con las celdas de la rejilla, esto se concreta con la siguiente nomenclatura para describir la plantilla del área:

- cada línea entre comillas define una fila, en nuestro caso tenemos cuatro filas.

- dentro de cada línea los nombres de las áreas ocuparan la correspondiente posición de acuerdo con las columnas existentes, en nuestro caso, en la segunda fila "prin prin lat" indica que la primera celda de la segunda fila la ocupará el área "prin" , también la segunda celda será ocupada por "prin", y la tercera celda será ocupada por el área "lat".

- El carácter "." indica una celda vacía, en nuestro caso en la primera fila "cab cab ." indica que la tercera celda estará vacía.

- Los espacios en blanco no indican nada y pueden usarse para ajustar las columnas de la plantilla para dar una mejor representación de la posición de cada elemento.

- Si escribimos otros caracteres se tratarán como basura y pueden invalidar la plantilla.

Como hemos visto, las plantillas de área son una forma muy sencilla y eficaz de crear diseños de páginas web evitando las otras nomenclaturas de posicionamiento de celdas que pueden ser más confusas al tener que especificar las líneas, filas y columnas.

Casillas fusionadas

Si un contenedor se define que ocupe varias casillas fusionadas en una fila (un área) , ya no se pueden utilizar esas casillas para contener otros elementos. Es decir una vez se fusionan unas casillas, estas desaparecen, ya no se pueden utilizar para contener otros elemento. Por ejemplo, si definimos un div que ocupe las cuatro casillas de una fila, no podemos colocar dentro otro div que ocupe la primera casilla, y otro div que ocupe la cuarta casilla. Para hacer algo así tendríamos que definir otra rejilla dentro de la casilla fusionada. Si se pueden anidar rejillas.