Reglas de las áreas de grid

Ya describimos la plantilla del contenedor grid y colocamos la lista de opciones como en el diseño. Faltan la descripción y el aviso. Sus áreas ya están en la plantilla; ahora debemos asignárselas a los elementos.

Las áreas permiten describir con claridad una distribución compleja e incluso cambiar el orden visual de los elementos. Sin embargo, tienen algunas limitaciones. Primero, las áreas deben ser rectangulares y continuas.

/* Este código no funciona */
grid-template-areas: "logo main"
                     "main main";

/* Este tampoco */
grid-template-areas: "nav logo nav";

Segundo, todas las filas de la plantilla deben tener el mismo número de columnas:

/* Este código no funciona */
grid-template-areas: "logo nav"
                     "aside main banner"
                     "footer";

Si el valor de grid-template-areas es incorrecto, el navegador lo ignorará y la distribución podría romperse.

Por último, para evitar superposiciones, conviene asignar cada área a un solo elemento. Si asignas la misma área a varios elementos, se superpondrán. Por eso las áreas no son una buena opción, por ejemplo, para una lista de tarjetas, sobre todo si no sabes de antemano cuántas habrá.

En cambio, resultan cómodas cuando hay pocos elementos y sabes dónde debe ir cada uno. Puedes consultar más detalles en la especificación.

Asignemos las áreas a la descripción y al aviso.