gap
Définit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
- Valeur initiale
normal- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- conteneurs flex, grid et multi-colonnes
- JavaScript
element.style.gap = "12px"
Exemple
#.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}<div class="grid stage">
<div class="box">1</div><div class="box">2</div><div class="box">3</div>
<div class="box">4</div><div class="box">5</div><div class="box">6</div>
</div>Définition et utilisation
#La propriété gap ajoute de l’espace seulement entre les éléments, jamais près des bords du conteneur. C’est un raccourci pour row-gap (espace entre les lignes) et column-gap (entre les colonnes). Une seule valeur règle les deux, deux valeurs règlent séparément les lignes et les colonnes.
Avant que gap fonctionne en Flexbox, on créait les espaces avec des marges, et il fallait retirer la marge du dernier élément. Aujourd’hui, une seule ligne règle la question, même avec un retour à la ligne sur plusieurs lignes.
La valeur peut être une longueur ou un pourcentage. Les espaces ne prennent pas de couleur ; pour des lignes de séparation, utilisez les bordures des éléments ou le fond du conteneur.
Syntaxe
#gap: <row-gap> <column-gap>?;Valeurs
#Valeurs en pratique
#0
.demo { gap: 0; }12px
.demo { gap: 12px; }24px 6px
.demo { gap: 24px 6px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Plutôt que des marges sur les éléments d’une liste, réglez
gapsur le conteneur. Vous n’avez pas à vous soucier du premier ni du dernier élément. - L’espace par rapport aux bords du conteneur se règle avec le
paddingdu conteneur,gapne l’ajoute pas.
Entrées associées
#- row-gapDéfinit l’espace entre les lignes d’un conteneur flex ou grid.
- column-gapDéfinit l’espace entre les colonnes d’un conteneur flex, grid ou multi-colonnes.
- flex-wrapPermet aux éléments flex de passer à la ligne suivante quand la place manque.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.