Primero vamos a definir el header, el main, el aside y el footer.
Para trabajar con areas en vez de utilizar grid-template-columns y grid-template-rows utilizamos grid-template-areas.
Con grid-template-areas modificamos el anchor de toda nuestra pagina de la siguiente manera.
grid-template-areas:
"header header header"
"aside main main"
"footer footer footer" ;
header
main
aside
Ahora vamos a crear un menu donde tenga 4 enlaces.
Mini pagina de prueba con grid
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
La UNAD en Twitter
Tweets by AmSchoolWay