Volver Atras

Compilado de Instrucciones CSS de Grid: Grid-Template-Areas y Grid-Area

Menú
Barra Lateral
Principal
Propaganda
Pie de Página

Mas sobre Grid...

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; ...}