Organiser les balises principales
Démo
<head>
<meta charset="UTF-8">
<style>
.container {
display:grid;
height:60vh;
}
.header {
background:#33FF8D;
}
.nav {
background:#F1948A ;
}
.main {
background:#D2B4DE;
}
.footer {
background:#F9E79F;
}
.aside {
background:#F2D7D5;
}
</style>
</head>
<body>
<div class=container>
<header class=header>header</header>
<nav class=nav>nav</nav>
<main class=main>main</main>
<aside class=aside>aside</aside>
<footer class=footer>footer</footer>
</div>
</body>
On constate:
- nous avons défini une grille d'une colonne et une ligne
- comme il n'y a pas assez de place pour placer les 5 éléments, grid a rajouter 4 lignes dynamiquement
- les items se sont empilés les uns sur les autres dans l'ordre de leur présence dans le DOM
- chaque item prend la place maximum sur la largeur et la hauteur
- dans l'inspecteur le mot grid est apparu à côté de la balise de display grid
- dans l'inspecteur, au survol de la balise de display grid, on voit clairement la grille se dessiner
Créer des colonnes
grid-template-columns permet de créer des colonnes.
Toutes les unités sont autorisées, l'unité relative fr (fraction) est très utilisée.
Démo
<head>
<meta charset="UTF-8">
<style>
.container {
display:grid;
grid-template-columns:200px 1fr 5fr 1fr 1fr;
}
.header {
background:#33FF8D;
}
.nav {
background:#F1948A ;
}
.main {
background:#D2B4DE;
}
.footer {
background:#F9E79F;
}
.aside {
background:#F2D7D5;
}
</style>
</head>
<body>
<div class=container>
<header class=header>header</header>
<nav class=nav>nav</nav>
<main class=main>main</main>
<aside class=aside>aside</aside>
<footer class=footer>footer</footer>
</div>
</body>
On constate:
- la grille est divisée en 5 colonnes
- la première colonne est fixe et large de 200px
- le reste de l'espace disponible est divisée en 4 fractions se répartissant sur le reste de l'espace disponible
- les enfants directs de la balise de type grid se sont placés dans l'ordre du DOM,
de gauche à droite et de haut en bas.
- les enfants directs ou non de la balise de type grid garde leur type par défaut (sauf si on utilise display bien sûr!)
Si on réduit la largeur de la fenêtre il n'y aura pas de passage à la ligne si l'espace n'est pas suffisant.
Créer des lignes
grid-template-rows permet de créer des lignes.
Toutes les unités sont autorisées, on utilise souvent auto pour adapter la hauteur de ligne à son contenu.
Démo
<head>
<meta charset="UTF-8">
<style>
.container {
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:auto auto;
}
.header {
background:#33FF8D;
}
.nav {
background:#F1948A ;
}
.main {
background:#D2B4DE;
}
.footer {
background:#F9E79F;
}
.aside {
background:#F2D7D5;
}
</style>
</head>
<body>
<div class=container>
<header class=header>header</header>
<nav class=nav>nav</nav>
<main class=main>main</main>
<aside class=aside>aside</aside>
<footer class=footer>footer</footer>
</div>
</body>
On constate:
- la grille est divisée en 3 colonnes occupant chacune 1fr
- la grille est divisée en 2 lignes occupant la hauteur de leur contenu
- les enfants de la balise de display grid se sont bien placées dans l'ordre du DOM de gauche à droite et de haut en bas
Démo
<head>
<meta charset="UTF-8">
<style>
.container {
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:auto auto;
column-gap:1em;
row-gap:1em;
}
.header {
background:#33FF8D;
}
.nav {
background:#F1948A ;
}
.main {
background:#D2B4DE;
}
.footer {
background:#F9E79F;
}
.aside {
background:#F2D7D5;
}
</style>
</head>
<body>
<div class=container>
<header class=header>header</header>
<nav class=nav>nav</nav>
<main class=main>main</main>
<aside class=aside>aside</aside>
<footer class=footer>footer</footer>
</div>
</body>
On constate:
Des gouttières horizontales et verticales divisent la grille.
Anatomie de la grille
Voir slide ici.
Démo
<head>
<meta charset="UTF-8">
<style>
.container {
height:50vh;
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:auto auto;
column-gap:1em;
row-gap:1em;
}
.header {
background:#33FF8D;
}
.nav {
background:#F1948A ;
}
.main {
background:#D2B4DE;
}
.footer {
background:#F9E79F;
}
.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:
- une cellule de la grille est définie par des lignes virtuelles
- les lignes virtuelles sont numérotées de gauche à droite et de droite à gauche
- une cellule de la grille est définie par 4 lignes virtuelles: 2 verticales et deux horizontales
