Vidéo
Commencez par relire l'article : définir une zone.
Travail
Vous devez réaliser la page du client suivante.
HTML
<div class="grid">
<div class="footer">BAS DE PAGE</div>
<div class="menu">MENU</div>
<div class="header">ENTETE</div>
<div class="article">MONARTICLE</div>
</div>
Compléter le CSS
Vous devez remplacer les ... par un ou plusieurs xx.start ou xx.end
.grid {
display: grid;
grid-template-columns: [nav-start ...] 150px [nav-end ...] 1fr [header-end ...];
grid-template-rows: [nav-start ...] 50px [...] 1fr [nav-end ... ] 50px [...];
}
.menu {
grid-area: nav;
}
.header {
grid-area: header;
}
.article {
grid-area: content;
}
.footer {
grid-area: footer;
}