Menú
Barra Lateral
Principal
Propaganda
Pie de Página
Para definir las Areas de una Grilla de 5 cols x 5 filas:
main{
grid-template-rows:
repeat(5, 1fr)
grid-template-columns:
repeat(5, 1fr)
grid-template-areas:
"Menu Menu Menu Menu Menu"
"BarraIzq Centro Centro Centro BarraD"
"BarraIzq Centro Centro Centro BarraD"
"BarraIzq Centro Centro Centro BarraD"
"Pie Pie Pie Pie Pie"; ...}
Luego se definen los selectores (Tag, #id, .clase, etc...) para cada area de esta Grilla:
-
#MenuSuperior{grid-area : Menu; ...}
-
.AreaPrincipal{grid-area : Centro; ...}