Définit une cellule dans un tableau
Comprendre et utiliser la propriété grid-row-gap dans les grilles CSS
La propriété CSS grid-row-gap permet de définir un espace vide entre les lignes du grille. Cet espace est ajouté entre chaque ligne du grille, y compris entre la première et la dernière ligne.La Syntaxe CSS
Voici la syntaxe de la propriété grid-row-gap :
grid-row-gap: <length> | <percentage>;a valeur de grid-row-gap peut être exprimée en unités de longueur (comme px, em, etc.) ou en pourcentage de la largeur du conteneur.
Voici un exemple d'utilisation de la propriété grid-row-gap dans un style CSS :
Exemple Copier le code
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 1em;
}
Dans cet exemple, nous avons créé un grille avec trois colonnes de largeur égale, et nous avons défini un espace vide de 1em entre chaque ligne.
Il est également possible de définir la même propriété en utilisant la notation raccourcie gap, qui définit à la fois l'espace entre les lignes et l'espace entre les colonnes :
Exemple Copier le code
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
}
En utilisant cette notation, l'espace vide sera ajouté entre chaque ligne et chaque colonne.
Notez que la propriété grid-row-gap n'est prise en compte que si la valeur de display du conteneur est définie sur grid.
| Valeurs par défaut | |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 16 | 52 | 10 | 44 |
Voici un exemple de code HTML et CSS qui utilise la propriété grid-row-gap pour ajouter de l'espace entre les lignes du grille :
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>grid-row-gap </title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 1em;
}
.item {
background-color: lightblue;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<h1>La propriété css grid-row-gap</h1>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
Astuces et conseils pour utiliser grid-row-gap
Voici quelques astuces et conseils pour utiliser la propriété CSS grid-row-gap :1- Utilisez la propriété grid-row-gap pour ajouter de l'espace entre les lignes du grille et rendre votre contenu plus lisible et plus agréable à l'œil.
2- Utilisez la notation raccourcie grid-gap pour définir à la fois l'espace entre les lignes et l'espace entre les colonnes de votre grille.
3- Si vous utilisez la propriété grid-row-gap en conjonction avec la propriété grid-template-rows, vous pouvez contrôler précisément l'espace entre chaque ligne de votre grille.
4- N'oubliez pas que la propriété grid-row-gap ne fonctionne que si la valeur de display du conteneur est définie sur grid.
5- Vous pouvez utiliser des valeurs négatives pour la propriété grid-row-gap afin de créer un effet d'overlap des éléments de la grille. Cependant, cette technique nécessite une certaine précaution car elle peut facilement rendre votre grille illisible ou difficile à comprendre.
6- Si vous utilisez un framework de grille tel que Bootstrap ou Foundation, vous pouvez utiliser les classes prédéfinies pour définir facilement l'espace entre les lignes de votre grille.
En suivant ces conseils, vous devriez être en mesure d'utiliser efficacement la propriété grid-row-gap dans vos projets de grille CSS.