4.1 Propriété grid-column
CSS Grid Layout offre des outils puissants pour gérer le positionnement des éléments dans une grille. Parmi ces outils clés se trouvent les propriétés grid-row et grid-column. Ces propriétés permettent aux développeurs de spécifier exactement quelles lignes et colonnes les éléments de la grille doivent occuper, offrant ainsi flexibilité et contrôle sur la mise en page.
La propriété grid-column détermine quelles colonnes un élément occupera dans le conteneur de la grille.
Syntaxe :
.grid-item {
grid-column: start / end;
}
Où :
start: la ligne de départ de la grilleend: la ligne de fin de la grille
Exemple 1 : Positionner un élément dans une colonne spécifique
Dans cet exemple, l'élément sera positionné entre la deuxième et la troisième ligne de la grille, occupant la deuxième colonne :
.grid-item {
grid-column: 2 / 3; /* L'élément occupe l'espace entre la deuxième et la troisième ligne de la grille */
}
Exemple 2 : Élément occupant plusieurs colonnes
Dans cet exemple, l'élément occupera trois colonnes, allant de la première à la quatrième ligne de la grille :
.grid-item {
grid-column: 1 / 4; /* L'élément occupe l'espace de la première à la quatrième ligne de la grille */
}
Exemple 3 : Utilisation de span pour s'étendre sur plusieurs colonnes
Dans cet exemple, l'élément occupera deux colonnes, en commençant à partir de sa position actuelle :
.grid-item {
grid-column: span 2; /* L'élément occupe deux colonnes, en commençant à partir de sa position actuelle */
}
4.2 Propriété grid-row
La propriété grid-row détermine quelles lignes un élément occupera dans le conteneur de la grille.
Syntaxe :
.grid-item {
grid-row: start / end;
}
Où :
start: la ligne de départ de la grilleend: la ligne de fin de la grille
Exemple 1 : Positionner un élément dans une ligne spécifique
Dans cet exemple, l'élément sera positionné entre la première et la deuxième ligne de la grille, occupant la première ligne :
.grid-item {
grid-row: 1 / 2; /* L'élément occupe l'espace entre la première et la deuxième ligne de la grille */
}
Exemple 2 : Élément occupant plusieurs lignes
Dans cet exemple, l'élément occupera deux lignes, allant de la deuxième à la quatrième ligne de la grille :
.grid-item {
grid-row: 2 / 4; /* L'élément occupe l'espace de la deuxième à la quatrième ligne de la grille */
}
Exemple 3 : Utilisation de span pour s'étendre sur plusieurs lignes
Dans cet exemple, l'élément occupera trois lignes, en commençant à partir de sa position actuelle :
.grid-item {
grid-row: span 3; /* L'élément occupe trois lignes, en commençant à partir de sa position actuelle */
}
Exemple 4. Utilisation de valeurs négatives
.element {
grid-row: 1 / -1; /* L'élément commence à la première ligne et se termine à la dernière */
}
4.3 Combinaison des propriétés grid-row et grid-column
Pour créer des mises en page plus complexes, vous pouvez combiner les propriétés grid-row et grid-column pour contrôler précisément le positionnement des éléments.
Exemple : Mise en page complexe utilisant grid-row et grid-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* L'élément occupe la première et deuxième ligne */
grid-column: 1 / 3; /* L'élément occupe la première et deuxième colonne */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* L'élément occupe la troisième et quatrième ligne */
grid-column: 2 / 5; /* L'élément occupe la deuxième, troisième et quatrième colonne */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* L'élément occupe la première ligne */
grid-column: 3 / 5; /* L'élément occupe la troisième et quatrième colonne */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Explication :
- Le conteneur
.containera quatre lignes et quatre colonnes, chacune occupant un espace égal - L'élément
.item1occupe les deux premières lignes et les deux premières colonnes - L'élément
.item2occupe les troisième et quatrième lignes et les deuxième, troisième et quatrième colonnes - L'élément
.item3occupe la première ligne et les troisième et quatrième colonnes
GO TO FULL VERSION