Introduction les objets du javascript
Espacer les colonnes d'une grille CSS avec la propriété grid-column-gap
La propriété CSS grid-column-gap est utilisée pour définir l'espacement entre les colonnes d'un grille CSS. Cette propriété peut être utilisée avec la propriété grid-template-columns pour créer une grille à colonnes fixes ou avec la propriété grid-template-areas pour créer une grille à zones nommées.
La Syntaxe CSS
Voici la syntaxe de la propriété grid-column-gap :
grid-column-gap: [valeur];La valeur peut être exprimée en pixels, en points de rem (pr), en pourcentage ou en valeurs relatives. Par exemple, si vous voulez définir un espacement de 20 pixels entre les colonnes, vous pouvez utiliser la syntaxe suivante :
grid-column-gap: 20px;
Il est également possible de définir un espacement différent entre chaque colonne en utilisant la syntaxe suivante :
grid-column-gap: 10px 20px;
Cela définira un espacement de 10 pixels entre la première et la deuxième colonne, et un espacement de 20 pixels entre la deuxième et la troisième colonne.
| Valeurs par défaut | 0 |
|---|---|
| Inherited: | non |
| Animable : | ouiEn savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.gridColumnGap="50px" |
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 utilisant la propriété grid-column-gap :
Exemple Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 20px;
}
.item {
background-color: lightgray;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<h1>La propriété css grid-column-gap</h1>
<div class="container">
<div class="item">Colonne 1</div>
<div class="item">Colonne 2</div>
<div class="item">Colonne 3</div>
<div class="item">Colonne 4</div>
</div>
</body>
</html>
Ce code créera une grille à 4 colonnes, avec un espacement de 20 pixels entre chaque colonne. Chaque élément de la grille aura une bordure noire et un arrière-plan gris clair, et le texte sera centré à l'intérieur de chaque élément.
Astuces et conseils pour utiliser la propriété css grid-column-gap
Voici quelques astuces et conseils pour utiliser efficacement la propriété CSS grid-column-gap dans vos designs web :1- Utilisez la propriété grid-column-gap pour ajouter de l'espace entre les colonnes de votre grille, ce qui peut aider à rendre votre design plus lisible et plus agréable à l'oeil.
2- Vous pouvez utiliser la propriété grid-column-gap avec la propriété grid-template-columns pour créer une grille à colonnes fixes. Cela vous permet de contrôler la largeur de chaque colonne de votre grille.
3- Vous pouvez également utiliser la propriété grid-column-gap avec la propriété grid-template-areas pour créer une grille à zones nommées. Cela vous permet de définir des zones nommées dans votre grille et de placer des éléments dans ces zones en utilisant les noms de zone comme référence.
4- N'oubliez pas que vous pouvez définir un espacement différent entre chaque colonne de votre grille en utilisant la syntaxe grid-column-gap: [valeur1] [valeur2]. Cela peut être utile si vous voulez créer une grille à colonnes de tailles différentes.
5- Si vous utilisez la propriété grid-column-gap avec la propriété grid-template-columns, n'oubliez pas de prendre en compte l'espacement entre les colonnes lorsque vous définissez la largeur de chaque colonne. Par exemple, si vous avez une grille à 3 colonnes avec un espacement de 20 pixels entre chaque colonne et que vous définissez la largeur de chaque colonne à 300 pixels, la grille sera trop large et dépassera de votre conteneur.
En suivant ces astuces et conseils, vous serez en mesure d'utiliser efficacement la propriété CSS grid-column-gap pour créer des grilles CSS attrayantes et organisées dans vos designs web.