grid-area
grid-area permet d'associer un nom aux enfants d'un élément de display grid.
grid-template-areas
grid-template-areas permet de répartir les enfants par leur nom sur la grille.
Attention, toutes les cellules de la grille doivent recevoir un et un seul nom d'enfant.
Démo
<head>
<meta charset="UTF-8">
<style>
body{margin:0;}
.container {
min-height:100vh;
display:grid;
grid-template-columns:repeat(6,1fr);
grid-template-rows:100px 1fr 100px;
grid-template-areas:
"header header nav nav nav nav"
"main main main main main aside"
"pied pied pied pied pied pied";
}
.header {
grid-area:header;
background:#33FF8D;
}
.nav {
grid-area:nav;
background:#F1948A ;
}
.main {
grid-area:main;
background:#D2B4DE;
}
.footer {
grid-area:pied;
background:#F9E79F;
}
.aside {
grid-area:aside;
background:#F2D7D5;
}
</style>
</head>
<body>
<div class=container>
<header class=header>header</header>
<nav class=nav>nav</nav>
<main class=main>main</main>
<footer class=footer>footer</footer>
<aside class=aside>aside</aside>
</div>
</body>
On constate:
- on attribue un nom à chaque enfant, le nom est au choix du programmeur
- au niveau de l'élément parent de display grid on dispose les enfants en fonction de la grille définie
Au sein du grid-template-areas, chaque aire occupe un ensemble contigu !!! On ne peut pas coder ce qui suit, en effet les 2 aside ne sont pas contigus au sein du grid-template-areas.
...
.container {
min-height:100vh;
display:grid;
grid-template-columns:repeat(6,1fr);
grid-template-rows:100px 1fr 100px;
grid-template-areas:
"header header nav nav nav nav"
"aside main main main main aside"
"pied pied pied pied pied pied";
}
...
Exemples
