1.1 Principes fondamentaux du Grid Layout
CSS Grid Layout est un outil puissant pour créer des mises en page complexes et adaptatives. Il fournit aux développeurs un système de grille bidimensionnel pour positionner les éléments, ce qui simplifie la création de mises en page simples comme complexes. Examinons les concepts de base et la syntaxe de CSS Grid, sans entrer dans les propriétés spécifiques.
Concepts de base de CSS Grid
-
Grid-container et Grid-items :
-
Grid-container est un élément qui inclut
display: grid. Cet élément devient le conteneur de la grille, et tous ses éléments enfants immédiats deviennent des Grid-items. - Grid-items sont les éléments enfants immédiats du Grid-container, qui sont positionnés dans la grille.
-
Grid-container est un élément qui inclut
-
Axes de la grille :
- Axe principal (inline axis) et axe de bloc (block axis) : Grid supporte deux axes pour positionner les éléments — l'axe principal et l'axe de bloc. Par défaut, l'axe principal est horizontal, et l'axe de bloc est vertical.
-
Cellules de la grille (Grid Cells) :
- Cellules de la grille sont les blocs de base formés aux intersections des lignes et des colonnes. Chaque Grid-item occupe une ou plusieurs cellules.
-
Lignes de la grille (Grid Lines) :
- Lignes de la grille sont les lignes horizontales et verticales qui séparent les lignes et les colonnes. Elles sont utilisées pour positionner les éléments par rapport à la grille.
-
Zones de la grille (Grid Areas) :
- Zones de la grille sont des zones nommées de la grille, créées en combinant plusieurs cellules. Elles permettent de regrouper les cellules et de placer des éléments dans des zones spécifiques.
1.2 Éléments syntaxiques
Éléments syntaxiques de base de CSS Grid
1. Création d'un Grid-container :
.container {
display: grid; /* ou display: inline-grid */
}
2. Définition de la structure de la grille :
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Définit trois colonnes de largeur différente */
grid-template-rows: 50px 100px; /* Définit deux lignes de hauteur différente */
}
3. Fusion des cellules avec grid-area :
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* L'élément occupe la première ligne et les trois premières colonnes */
}
4. Positionnement automatique des éléments :
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Définit la hauteur minimale des lignes */
}
1.3 Exemples
Mise en page simple avec CSS Grid :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple CSS Grid</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Explication :
- Le conteneur .container définit trois colonnes, la première et la troisième occupant une part égale de l'espace disponible, tandis que la deuxième en occupe deux fois plus.
- Deux lignes sont définies avec une hauteur fixe.
- La propriété gap définit l'espace entre les cellules de la grille.
GO TO FULL VERSION