La propriété gap dans CSS est un raccourci pour row-gapet column-gap, spécifiant la taille des gouttières, qui est l'espace entre les lignes et les colonnes dans les mises en page grille, flex et multi-colonnes.
/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )
Utilisez le curseur dans la démo ci-dessous pour voir la gappropriété en action:
Syntaxe
gap accepte une ou deux valeurs:
- Une seule valeur définit les deux
row-gapetcolumn-gappar la même valeur. - Lorsque deux valeurs sont utilisées, la première définit le
row-gapet le second définit lecolumn-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )La spécification du module CSS Grid Layout a défini l'espace entre les pistes de la grille à l'aide de la grid-gappropriété. gapest destiné à le remplacer afin que les espaces puissent être définis dans plusieurs méthodes de mise en page CSS, comme flexbox, mais grid-gapdoivent toujours être utilisés dans les cas où un navigateur peut avoir implémenté grid-gapmais n'a pas encore commencé à prendre en charge la nouvelle gappropriété.
Valeurs
gap accepte les valeurs suivantes:
normal: (Par défaut) Le navigateur spécifiera une valeur utilisée de 1em pour la mise en page multi-colonnes et 0px pour tous les autres contextes de mise en page (c.-à-d. Grille et flex).: Toute longueur CSS valide et non-négatifs, tels quepx,em,remet%, entre autres.: La taille de l'écart sous forme de valeur de pourcentage non négative par rapport à la dimension de l'élément. (Voir ci-dessous pour plus de détails.)initial: Applique le paramètre par défaut de la propriété, à savoirnormal.inherit: Adopte la valeur de l'écart du parent.unset: Supprime le courantgapde l'élément.
Pourcentages dans les propriétés de l'écart
Lorsque la taille d'un conteneur dans la dimension d'espace est définie, gaprésout les pourcentages par rapport à la taille de la zone de contenu du conteneur dans tous les types de mise en page.
En d'autres termes, lorsque le navigateur connaît la taille du conteneur, il peut calculer la valeur en pourcentage du gap. Par exemple, lorsque la hauteur du conteneur est de 100px et que le gapest défini sur 10%, le navigateur sait que 10% de 100px équivaut à 10px.
Mais lorsque le navigateur ne connaît pas la taille, il se demandera "10% de quoi?" Dans ces cas, gapse comporte différemment en fonction du type de mise en page.
Dans une disposition en grille, les pourcentages sont résolus par rapport à zéro pour déterminer les contributions de taille intrinsèque, mais résolus par rapport à la zone de contenu de l'élément lors de la présentation du contenu de la boîte, ce qui signifie qu'il mettra de l'espace entre les éléments mais que l'espace n'affectera pas la taille du conteneur.
Dans cette démo, la hauteur du conteneur n'est pas définie. Voyez ce qui se passe lorsque vous augmentez la gaptaille. Ensuite, définissez les gapunités en pixels et réessayez:
Dans une mise en page flexible, les pourcentages sont résolus par rapport à zéro dans tous les cas, ce qui signifie que les espaces ne s'appliqueront pas lorsque la taille du conteneur n'est pas connue du navigateur:
Utilisation de la fonction calc () avec gap
Vous pouvez utiliser la calc()fonction pour spécifier la taille du gapmais, au moment de la rédaction de cet article, il n'y a pas de support pour cela sur Safari et iOS.
.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); )
.grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )Exemples
La gappropriété est conçue pour être utilisée dans les mises en page grille, flex et multi-colonnes. Voyons quelques exemples.
Disposition de la grille
Dans la démo suivante, vous pouvez voir gapêtre utilisé pour spécifier les propriétés row-gapet column-gapsur un conteneur de grille, définissant les gouttières entre les lignes de la grille et les colonnes de la grille, respectivement:
Disposition flexible
L'application d'un espace à l' axe principal d'un conteneur flexible indique l'espacement entre les éléments flexibles sur une seule ligne de la disposition flexible.
Voici column-gaputilisé dans une direction de ligne:
Voici row-gaputilisé dans une direction de colonne:
L'application gapà l' axe transversal d'un conteneur flexible indique l'espacement entre les lignes flex de la disposition flexible.
Voici row-gapdans une direction de ligne:
Voici column-gapdans une direction de colonne:
Disposition multi-colonnes
column-gapapparaît dans les mises en page à plusieurs colonnes pour créer des espaces entre les zones de colonne, mais notez que cela row-gapn'a aucun effet puisque nous ne travaillons que dans des colonnes. gappeut toujours être utilisé dans ce contexte, mais seul le column-gapsera appliqué.
Comme vous pouvez le voir dans la prochaine démo, bien que la gappropriété ait une valeur de 2rem, elle ne sépare les éléments que horizontalement au lieu des deux directions puisque nous travaillons en colonnes:
Plus vous en savez…
Il y a quelques points à noter à propos du travail avec l' gapétablissement.
C'est un bon moyen d'éviter les espacements indésirables
Avez-vous déjà utilisé des marges pour créer un espacement entre les éléments? Si nous ne faisons pas attention, nous pouvons nous retrouver avec un espacement supplémentaire avant et après le groupe d'éléments.
Pour résoudre ce problème, il faut généralement ajouter des marges négatives ou recourir à des pseudo-sélecteurs pour supprimer la marge d'éléments spécifiques. Mais l' gapavantage d' utiliser des méthodes de mise en page plus modernes est que vous ne disposez que d'espace entre les éléments. La cruauté supplémentaire au début et à la fin n'est jamais un problème!
Mais, hé, si vous voulez avoir de l'espace autour des éléments lors de l'utilisation gap, placez paddingle conteneur comme ceci:
.container ( display: flex; gap: 1rem; padding: 1rem; )La taille de la gouttière n'est pas toujours égale à la valeur de l'écart
La gappropriété n'est pas la seule chose qui peut mettre de l'espace entre les éléments. Les marges, les rembourrages justify-contentet align-contentpeuvent également augmenter la taille de la gouttière et affecter la gapvaleur réelle .
Dans l'exemple suivant, nous définissons un 1em gapmais, comme vous pouvez le voir, il y a beaucoup plus d'espace entre les éléments, causé par l'utilisation d'alignements distribués, comme justify-contentet align-content:
Prise en charge du navigateur
Les requêtes de fonctionnalités sont généralement un bon moyen de vérifier si un navigateur prend en charge une propriété spécifique, mais dans ce cas, si vous vérifiez la gappropriété dans flexbox, vous pouvez obtenir un faux positif car une requête de fonctionnalité ne fera pas la distinction entre les modes de disposition. En d'autres termes, il peut être pris en charge dans une mise en page flexible, ce qui donne un résultat positif, mais il n'est en fait pas pris en charge s'il est utilisé dans une mise en page en grille.
Disposition de la grille
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | 16+ | 61+ | 66+ | 12+ | 53+ |
| Safari sur iOS | Opera Mobile | Navigateur Android | Chrome pour Android | Firefox pour Android |
|---|---|---|---|---|
| 12+ | Non | 81+ | 84+ | 68+ |
Disposition de la grille avec des valeurs calc ()
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | 84+ | 79+ | 84+ | Non | 69+ |
| Safari sur iOS | Opera Mobile | Navigateur Android | Chrome pour Android | Firefox pour Android |
|---|---|---|---|---|
| Non | Non | 81+ | 84+ | 68+ |
Disposition en grille avec valeur en pourcentage
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | 84+ | 79+ | 84+ | Non | 69+ |
| Safari sur iOS | Opera Mobile | Navigateur Android | Chrome pour Android | Firefox pour Android |
|---|---|---|---|---|
| Non | Non | 81+ | 84+ | 68+ |
Disposition flexible
La spécification d'utilisation gapavec flexbox est actuellement en état de brouillon de travail.
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 84 | 63 | Non | 84 | TP |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | Non | Non |
Disposition multi-colonnes
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | 84+ | 79+ | 84+ | Non | 69+ |
| Safari sur iOS | Opera Mobile | Navigateur Android | Chrome pour Android | Firefox pour Android |
|---|---|---|---|---|
| Non | Non | 81+ | 84+ | 68+ |
Plus d'information
- Module d'alignement de boîtes CSS niveau 3
- Chrome atterrit un espace Flexbox (Ticket # 761904)
- État de la fonctionnalité CSS WebKit
En rapport
- Disposition de la grille
- Disposition Flexbox
- Disposition multi-colonnes