Una forma alternativa de posicionar elementos en tu cuadrícula es usar la propiedad grid-template-areas y asignar un nombre a los diversos elementos de tu diseño.
Elimina el posicionamiento sobre las líneas de base del último ejemplo (o vuelve a descargar el archivo para tener un punto de partida nuevo) y añade el código CSS siguiente.
.png "carbon(418).png")
Vuelve a cargar la página y observa que tus elementos se han colocado como antes ¡sin necesidad de usar números de línea!
Las reglas para grid-template-areas son las siguientes:
- Hay que tener todas las celdas de la cuadrícula llenas.
- Para abarcar el ancho de dos celdas, repite el nombre.
- Para dejar una celda vacía, utiliza un punto: ..
- Las áreas han de ser rectangulares; por ejemplo, no puedes tener un área en forma de L.
- Las áreas no pueden repetirse en lugares diferentes.
Puedes jugar con nuestro diseño, por ejemplo, cambiar el pie de página para que esté solo debajo del contenido, y la barra lateral para abarcar todo. Esta manera de describir un diseño de página es muy adecuada porque resulta obvio a partir del CSS qué sucede exactamente.