Exemple
Réalisons le layout suivant:
Démo
<head>
<meta charset="UTF-8">
<style>
body{margin:0;}
.container {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-template-rows:auto auto auto auto;
}
.header {
min-height:10vh;
background:#33FF8D;
grid-row:1/3;
grid-column:1/13;
}
.nav {
min-height:5vh;
background:#F1948A ;
grid-row:3/4;
grid-column:1/13;
}
.main {
min-height:80vh;
background:#D2B4DE;
grid-row:4/5;
grid-column:1/10;
}
.footer {
min-height:5vh;
background:#F9E79F;
grid-row:5/6;
grid-column:1/13;
}
.aside {
background:#F2D7D5;
grid-row:4/5;
grid-column:10/13;
}
</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:
- la balise header s'étend sur 2 lignes et 12 colonnes
- la balise nav s'étend sur 1 lignes et 12 colonnes
- la balise main s'étend sur 1 lignes et 12 colonnes
- la balise aside s'étend sur 1 lignes et 12 colonnes
- la balise footer s'étend sur 1 lignes et 12 colonnes
Autres exemples à analyser
