8.1 Propriété justify-content
CSS Grid Layout offre des outils puissants pour gérer l'alignement de l'ensemble du conteneur de grille à l'intérieur de l'espace disponible. Les propriétés justify-content
, align-content
et place-content
te permettent de contrôler l'alignement des lignes et des colonnes à l'intérieur du conteneur, offrant ainsi flexibilité et précision lors de la création de mises en page.
La propriété justify-content
gère l'alignement horizontal de toute la grille à l'intérieur du conteneur. Cette propriété est utile lorsque la taille du conteneur est plus grande que la largeur nécessaire de la grille elle-même.
Syntaxe :
.grid-container {
display: grid;
justify-content: value;
}
Où : value
peut prendre les valeurs suivantes :
start
: aligne la grille au début du conteneurend
: aligne la grille à la fin du conteneurcenter
: centre la grille à l'intérieur du conteneurstretch
: étire la grille pour qu'elle remplisse tout le conteneurspace-around
: place un espace égal autour de chaque élémentspace-between
: place un espace égal entre les élémentsspace-evenly
: place un espace égal entre les éléments et les bords du conteneur
Exemple 1 : Alignement au début du conteneur
Dans cet exemple, tout le contenu sera aligné sur le bord gauche du conteneur :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: start; /* Aligne le contenu sur le bord gauche du conteneur */
}
Exemple 2 : Centrage du contenu
Dans cet exemple, tout le contenu sera centré à l'intérieur du conteneur :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center; /* Centre le contenu à l'intérieur du conteneur */
}
8.2 Propriété align-content
La propriété align-content
détermine comment le contenu de la grille est aligné sur l'axe vertical à l'intérieur du conteneur grid. Elle est utile lorsque la grille ne remplit pas tout l'espace vertical disponible.
Syntaxe :
.grid-container {
align-content: value;
}
Où : value
est la valeur qui détermine l'alignement vertical du contenu. Valeurs possibles :
start
: aligne le contenu au début du conteneurend
: aligne le contenu à la fin du conteneurcenter
: centre le contenu à l'intérieur du conteneurspace-between
: place un espace égal entre les élémentsspace-around
: place un espace égal autour de chaque élémentspace-evenly
: place un espace égal entre les éléments et les bords du conteneurstretch
(par défaut) : étire le contenu pour remplir tout l'espace disponible
Exemple 1 : Alignement au début du conteneur
Dans cet exemple, tout le contenu sera aligné sur le bord supérieur du conteneur :
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: start; /* Aligne le contenu sur le bord supérieur du conteneur */
}
Exemple 2 : Centrage du contenu
Dans cet exemple, tout le contenu sera centré à l'intérieur du conteneur :
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: center; /* Centre le contenu à l'intérieur du conteneur */
}
8.3 Propriété place-content
La propriété place-content
est une abréviation pour définir en même temps les valeurs de justify-content
et align-content
.
Syntaxe :
.grid-container {
place-content: justify-value align-value;
}
Où :
justify-value
: valeur pour l'alignement horizontal (justify-content
)align-value
: valeur pour l'alignement vertical (align-content
)
Exemple 1 : Centrage du contenu à l'horizontale et à la verticale
Dans cet exemple, tout le contenu sera centré à l'intérieur du conteneur, tant à l'horizontale qu'à la verticale :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: center center; /* Centre le contenu tant à l'horizontale qu'à la verticale */
}
Exemple 2 : Étirement du contenu sur la largeur et alignement en haut
Dans cet exemple, le contenu sera étiré sur la largeur du conteneur et aligné en haut :
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: stretch start; /* Étire le contenu sur la largeur et l'aligne en haut */
}
8.4 Exemple de mise en œuvre complète
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px); /* Trois colonnes de largeur fixe */
grid-template-rows: repeat(3, 100px); /* Trois lignes de hauteur fixe */
gap: 10px;
place-content: center center; /* Centre le contenu à l'horizontale et à la verticale */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
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>Exemple d'alignement du conteneur Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Élément 1</div>
<div class="grid-item item2">Élément 2</div>
<div class="grid-item item3">Élément 3</div>
<div class="grid-item item4">Élément 4</div>
<div class="grid-item item5">Élément 5</div>
<div class="grid-item item6">Élément 6</div>
</div>
</body>
</html>
Explication du code :
-
.grid-container
: crée un conteneur Grid avec trois colonnes de largeur fixe et trois lignes de hauteur fixe. Utilise la propriétéplace-content
pour centrer le contenu à l'horizontale et à la verticale -
.grid-item
: définit les styles de base pour les éléments de grille, comme la couleur de fond, la couleur du texte, les marges, le centrage du texte et la bordure