Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété grid-gap

Description de la propriété grid-gap.

Définit l'espacement entre les cellules d'une grille, horizontalement et verticalement. grid-gap est une propriété raccourcie qui est équivalente aux deux propriétés suivantes :

  • grid-row-gap : espacement vertical, entre les lignes.
  • grid-column-gap : espacement horizontal, entre les colonnes.

Reportez-vous à la page sur la propriété grid pour consulter une présentation générale des possibilités des grilles et des propriétés associées.

Valeurs pour grid-gap.

grid-gap accepte une ou deux valeurs séparées par un espace :

  • Si une seule valeur est précisée, elle sera appliquée aussi bien à l'espacement entre le lignes qu'à l'espacement entre les colonnes.
  • Si deux valeurs sont précisées, la première correspond à l'espacement entre les lignes, la deuxième à l'espacement entre les colonnes.
  • grid-gap: 5px 8px; lig col

    La première valeur indique l'espacement entre les lignes, la deuxième valeur est l'espacement entre les colonnes. Ce sont deux valeurs positives ou nulles, suivie d'une unité de dimension. Voir les unités de dimensions en CSS.

    Les pourcentages sont calculés par rapport à la hauteur de la grille pour la première valeur et par rapport à la largeur de la grille pour la deuxième valeur.

    Si une seule valeur est indiquée, elle s'applique aux deux espacements.

    La valeur par défaut est 0 dans les deux sens.

  • grid-gap: initial;

    La valeur initiale est 0.

  • grid-gap: unset; grid-gap: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Attention ! La gestion des espaces entre les lignes ou entre les colonnes n'est pas prise en charge sur Internet Explorer.

grid-gap :
1
2
3
4
5
6
7
8
9
10

Prise en charge par les navigateurs (compatibilité).

La prise en charge des grilles est globalement assez bonne, sauf pour Internet explorer qui ne gère pas le espacements entre les lignes ou les colonnes. Reportez-vous à la page sur la propriété grid pour une description plus détaillée des problèmes de compatibilité.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.