Spécifie si l'élément doit avoir son orthographe et la grammaire coché ou non
La propriété css grid-gap : définition et utilisation
La propriété CSS grid-gap est utilisée pour définir un espace vide entre les lignes et les colonnes d'un grille CSS. Elle peut être utilisée pour ajouter de l'espacement entre les éléments de la grille afin de les séparer visuellement.
La Syntaxe CSS
Voici la syntaxe de base de la propriété CSS grid-gap :
grid-gap: <length> | <percentage> | <row-gap> <column-gap>;
<length> est une valeur numérique suivie d'une unité de mesure (comme px, em, rem, etc.). Cette valeur définit l'espace vide entre les lignes et les colonnes de la grille. <percentage> est une valeur en pourcentage qui définit l'espace vide entre les lignes et les colonnes de la grille par rapport à la taille du conteneur de la grille. <row-gap> et <column-gap> sont des valeurs numériques suivies d'une unité de mesure qui permettent de définir séparément l'espace vide entre les lignes et les colonnes de la grille.
Voici un exemple d'utilisation de la propriété grid-gap :
Exemple 📋 Copier le code
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
Dans cet exemple, la grille aura un espace vide de 20 pixels entre chaque ligne et chaque colonne.
Vous pouvez également utiliser la propriété grid-row-gap pour définir un espace vide entre les lignes de la grille et la propriété grid-column-gap pour définir un espace vide entre les colonnes. Voici un exemple :
Exemple 📋 Copier le code
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10px;
grid-column-gap: 20px;
}
Dans cet exemple, la grille aura un espace vide de 10 pixels entre chaque ligne et un espace vide de 20 pixels entre chaque colonne.| Valeurs par défaut | 0 0 |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.gridGap="50px 100px" |
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 comment utiliser la propriété grid-gap :
Définissez un conteneur comme une grille en utilisant la propriété display: grid ou display: inline-grid.
Définissez la propriété grid-gap sur le conteneur avec une valeur en pixels, en pourcentage ou en utilisant l'une des unités de mesure prédéfinies (comme em ou rem). Par exemple :
Exemple 📋 Copier le code
.grid {
display: grid;
grid-gap: 20px;
}
Vous pouvez également utiliser la propriété grid-row-gap pour définir un espace vide entre les lignes de la grille et la propriété grid-column-gap pour définir un espace vide entre les colonnes.Voici un exemple d'utilisation de la propriété grid-gap :
Exemple 📋 Copier le code
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
background-color: lightblue;
border: 2px solid darkblue;
}
</style>
<div class="grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>Ce code créera une grille avec trois colonnes et deux lignes, avec un espace vide de 20 pixels entre chaque élément de la grille. Voici quelques astuces et conseils pour utiliser la propriété CSS grid-gap :
1- Utilisez la propriété grid-gap pour ajouter de l'espacement entre les éléments de la grille et les séparer visuellement. Cela peut aider à améliorer la lisibilité et à rendre votre grille plus attrayante.
2- Vous pouvez utiliser la propriété grid-gap pour ajouter un espace vide entre les bords de la grille et ses éléments en utilisant une valeur négative. Cela peut être utile si vous souhaitez que les éléments de la grille débordent du bord de la grille.
3- Utilisez la propriété grid-row-gap pour ajouter de l'espacement entre les lignes de la grille et la propriété grid-column-gap pour ajouter de l'espacement entre les colonnes. Cela vous permet de contrôler séparément l'espacement entre les lignes et les colonnes de la grille.
4- Si vous utilisez la propriété grid-gap avec la propriété grid-template-rows ou grid-template-columns, assurez-vous de prendre en compte l'espacement ajouté par grid-gap lorsque vous définissez la taille des lignes ou des colonnes de la grille.
5- Si vous utilisez la propriété grid-gap avec des éléments qui ont des bordures, assurez-vous de prendre en compte l'espacement ajouté par grid-gap lorsque vous définissez la taille des éléments. Les bordures des éléments s'ajouteront à l'espacement ajouté par grid-gap, ce qui peut affecter la mise en page de la grille.
6- Utilisez la propriété grid-gap en combinaison avec d'autres propriétés de grille, comme grid-template-rows et grid-template-columns, pour créer des mises en page complexes et attrayantes.
Gardez à l'esprit que la propriété grid-gap n'est pas prise en charge par tous les navigateurs, en particulier les versions antérieures à Internet Explorer 10. Si vous souhaitez utiliser grid-gap dans votre projet, assurez-vous de vérifier la compatibilité du navigateur et de mettre en place des stratégies de déploiement pour gérer les navigateurs qui ne prennent pas en charge cette propriété.