oujood.com

Astuces et bonnes pratiques pour utiliser la propriété grid-gap

La propriété grid-gap définit la taille de l'espace entre les lignes et les colonnes dans une disposition en grille, et est une propriété raccourcie pour les propriétés : grid-row-gap et grid-column-gap

chercher |

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éfaut0 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é.



ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57165210 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é.


Voir aussi nos tutoriel :

:hover

Ajoute un style à un élément lorsque vous passez la souris dessus

padding-left

Définit la marge intérieure gauche d'un élément

max-width

Définit la largeur maximale d'un élément