2.1 Propriété display: grid
CSS Grid Layout est un puissant système de mise en page qui permet de créer des mises en page web complexes en utilisant des lignes et des colonnes. La première étape du travail avec CSS Grid est de créer un conteneur Grid. Ci-dessous, nous allons explorer comment utiliser la propriété display: grid pour créer un conteneur Grid et gérer ses aspects de base.
Concepts de base pour créer un conteneur Grid
Propriété display: grid
La propriété display: grid définit un élément comme conteneur Grid. C'est l'étape de base qui permet d'utiliser toutes les fonctionnalités de CSS Grid pour la mise en page des éléments.
Exemple :
.grid-container {
display: grid;
}
Éléments de base du conteneur Grid
Après avoir défini le conteneur Grid avec la propriété display: grid, tous les éléments enfants de ce conteneur deviennent automatiquement des éléments de la grille. Cela permet de gérer leur disposition et leur alignement à l'intérieur du conteneur.
Exemple :
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de conteneur Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Élément 1</div>
<div class="grid-item">Élément 2</div>
<div class="grid-item">Élément 3</div>
</div>
</body>
</html>
Explication du code :
.grid-container: définit l'élément comme conteneur Grid avec la propriétédisplay: grid. Ajoute également une bordure pour mettre en évidence le conteneur visuellement.grid-item: définit les styles de base pour les éléments à l'intérieur du conteneur Grid, tels que la couleur de fond, la couleur du texte, les marges, la bordure et le centrage du texte
2.2 Conteneurs Grid imbriqués
L'un des avantages du CSS Grid est la possibilité de créer des conteneurs Grid imbriqués. Cela permet de créer des mises en page complexes où un élément de la grille peut devenir un conteneur Grid pour ses éléments enfants.
Exemple :
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conteneurs Grid imbriqués</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Élément 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">Élément imbriqué 1</div>
<div class="nested-grid-item">Élément imbriqué 2</div>
</div>
</div>
<div class="grid-item">Élément 3</div>
</div>
</body>
</html>
Explication du code :
-
.nested-grid-container: définit un conteneur Grid imbriqué avec la propriétédisplay: grid, ajoute également des espaces entre les éléments (gap: 5px) et une marge intérieure (padding: 10px) -
.nested-grid-item: définit les styles de base pour les éléments à l'intérieur du conteneur Grid imbriqué, tels que la couleur de fond, les marges et la bordure
2.3 Gestion du comportement du conteneur Grid
La propriété display: grid permet également d'utiliser des propriétés supplémentaires pour gérer le comportement du conteneur Grid. Par exemple, la propriété grid-auto-flow gère le placement automatique des éléments.
Exemple :
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conteneur Grid avec auto-flow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Élément 1</div>
<div class="grid-item">Élément 2</div>
<div class="grid-item">Élément 3</div>
<div class="grid-item">Élément 4</div>
<div class="grid-item">Élément 5</div>
</div>
</body>
</html>
2.4 Utilisation de Flexbox à l'intérieur d'un conteneur Grid
Dans certains cas, utiliser Flexbox à l'intérieur des éléments de la grille peut être utile pour créer des mises en page plus complexes. Cela permet de combiner les avantages des deux technologies.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox à l'intérieur d'un conteneur Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Élément Flex 1</div>
<div class="flex-item">Élément Flex 2</div>
</div>
<div class="grid-item">Élément 2</div>
<div class="grid-item">Élément 3</div>
</div>
</body>
</html>
Explication du code :
.flex-container: définit un élément de grille comme un conteneur flex avec la propriétédisplay: flex.flex-item: définit les styles de base pour les éléments à l'intérieur du conteneur flex, tels que la couleur de fond, les marges et la flexibilité (flex: 1)
GO TO FULL VERSION