Comment utiliser la propriété CSS GAP

CSS gap Attributs: contrôle facilement l'espacement des éléments

Points de base

Les propriétés
• CSS gap permettent aux développeurs de contrôler facilement l'espacement horizontal et vertical entre les éléments, la résolution de nombreux problèmes de disposition et la simplification de la gestion des marges. Il est compatible avec les dispositions de grille, les dispositions Flexbox et les dispositions multi-colonnes.
La propriété
• gap peut accepter deux valeurs: l'espacement des lignes et l'espacement des colonnes. Lorsqu'une seule valeur est spécifiée, la valeur est appliquée à la ligne et à la colonne. La valeur d'espacement peut être n'importe quelle unité de longueur, de pourcentage ou même une valeur calculée à l'aide de la fonction calc().
Les propriétés
• gap conviennent aux grilles CSS, Flexbox et les dispositions multi-colonnes. Il fonctionne parfaitement dans une disposition réactive, la direction d'espacement ajusté automatiquement en fonction de la disposition de la boîte. Vous pouvez également utiliser pour définir l'espacement des éléments de texte en définissant le conteneur de texte sur display: grid et en ajoutant la valeur gap.
• Bien que la propriété gap d'une disposition de grille ait été initialement appelée grid-gap, il est préférable de s'en tenir à gap car il convient désormais aux dispositions de grille, flexible et multi-colonnes. Cependant, dans certains cas, les propriétés d'alignement telles que justify-content et align-content peuvent faire espacer les éléments au-delà de la valeur gap. Notez également que gap n'accepte pas les valeurs négatives.

Cet article explorera en profondeur l'utilisation des attributs CSS gap, qui peuvent facilement ajouter l'espacement des éléments et résoudre de nombreux problèmes de disposition qui ont tourmenté les développeurs pendant de nombreuses années.

gap Utilisation des attributs

L'attribut

gap nous permet d'ajouter un espacement horizontal et vertical entre les éléments. Bien sûr, nous pouvons toujours utiliser margin pour y parvenir. Cependant, l'utilisation de margin pour définir l'espacement des projets peut être lourd, en particulier lorsque le projet enveloppe - parce que le dernier projet aura toujours des marges supplémentaires.

L'image suivante montre quatre divs qui utilisent les marges gauche et droite et inférieure pour définir l'espacement:

article > div {
  margin: 0 10px 10px 0;
}

Veuillez vérifier l'exemple sur Codepen: La propriété CSS GAP: Utilisation de la marge au lieu de l'espace

Remarquez que l'arrière-plan du conteneur est mis en évidence à droite et en bas?

gap Les attributs ajoutent uniquement l'espacement entre les éléments , ce qui facilite la disposition. Ce qui suit est la même mise en page que ci-dessus, mais ce temps utilise au lieu de : gap margin Veuillez vérifier l'exemple sur Codepen:

La propriété CSS GAP: Espacement des éléments avec raccourci GAP

article {
  display: grid;
  gap: 10px;
}

Maintenant, nous n'aurons pas d'espacement supplémentaire laid à droite et en bas. L'espacement est désormais uniquement entre les projets et les projets sont étroitement organisés dans le conteneur.

Nous pouvons utiliser

avec trois modes de mise en page différents: Grille, Flexbox et multi-colonnes. Nous présenterons chaque mode dans la séquence ci-dessous.

Guide de l'utilisation des propriétés gap

L'utilisation gap est aussi simple que l'écriture gap: 10px. (Nous avons vu le résultat de cela dans la démo ci-dessus.) Mais voyons ce que cela signifie.

gap L'attribut peut accepter deux valeurs: l'espacement des lignes (c'est-à-dire l'espacement entre les lignes des éléments) et l'espacement des colonnes (c'est-à-dire l'espacement entre les colonnes des éléments): gap: <row-gap> <column-gap>.

Si nous spécifions une seule valeur, elle sera appliquée à toutes les lignes et colonnes.

Nous pouvons également utiliser les propriétés row-gap et column-gap pour spécifier respectivement l'espacement des colonnes ou l'espacement des lignes.

La valeur de

gap peut être n'importe quelle unité de longueur (telle que PX, EM, VW), pourcentage d'unités, ou même des valeurs calculées à l'aide de la fonction calc().

comment utiliser gap Propriétés

dans la grille CSS

Nous voyons un exemple ci-dessus en utilisant gap avec la disposition de la grille. Essayons un autre exemple en utilisant différentes unités:

article > div {
  margin: 0 10px 10px 0;
}

Veuillez vérifier l'exemple sur Codepen: La propriété CSS GAP: Utilisation de l'écart avec la grille à long terme

Cette fois, nous avons utilisé différentes unités pour les lignes et les colonnes.

Un avantage supplémentaire de

gap est qu'il fonctionne parfaitement dans une disposition réactive. Si nous définissons l'espacement entre deux éléments, cet espacement s'appliquera, que les éléments soient disposés côte à côte ou vers le bas ou vers le bas, comme indiqué dans l'exemple ci-dessous.

Veuillez vérifier l'exemple sur Codepen: Untitled

Appuyez sur le bouton 0,5x en bas du code de code ci-dessus, ou ouvrez le codep dans votre navigateur et élargissez et rétrécissez la fenêtre pour voir comment la direction d'espacement est ajustée en fonction de la disposition de la boîte. Nous bénéficions ici d'une seule valeur sur la propriété gap, qui peut être appliquée aux lignes et colonnes. Si nous ne voulons pas d'espacement des lignes sur des écrans plus petits, nous pouvons plutôt définir column-gap: 10px. Veuillez essayer ceci dans le codepen ci-dessus.

Pour plus d'informations sur la façon d'utiliser la disposition de la grille, consultez notre guide de mise en page CSS Grid.

comment utiliser gap Propriétés

dans Flexbox

Lorsque Flexbox est apparu pour la première fois, il n'avait pas d'attribut gap, nous avons donc dû nous tourner vers la façon ancienne et douloureuse d'utiliser margin. Heureusement, l'utilisation de gap dans les navigateurs modernes est désormais courant et bien soutenu.

Nous pouvons l'utiliser comme nous le faisons dans une grille:

article {
  display: grid;
  gap: 10px;
}

Veuillez cocher l'exemple sur Codepen: La propriété CSS GAP: Utilisation de l'écart avec Flexbox

Dans le cas de nos ruptures de ligne réactives du projet Flex, les paramètres gap seront réajustés au besoin et ne s'aligneront généralement pas dans les directions verticales et horizontales, comme le montre l'exemple ci-dessous.

Veuillez cocher l'exemple sur Codepen: La propriété CSS GAP: Utilisation de l'écart avec une disposition flexible réactive

Si nous voulons que l'espacement s'aligne horizontalement et verticalement, il est préférable d'utiliser une grille.

comme les grilles, si nous voulons simplement définir l'espacement entre les lignes de colonne ou , nous pouvons utiliser respectivement column-gap et row-gap.

comment utiliser gap Propriétés

dans la disposition multi-colonnes

La mise en page multi-colonnes organise le contenu en colonnes, mais par défaut, ces colonnes auront un espacement 1EM ensemble par le navigateur. Nous pouvons utiliser la propriété gap pour définir notre largeur d'espacement préférée:

article > div {
  margin: 0 10px 10px 0;
}

Veuillez vérifier l'exemple sur Codepen: La propriété CSS GAP: Utilisation de l'écart dans une disposition multi-colonnes

(Essayez de supprimer l'attribut gap du codePen ci-dessus pour voir ce qui se passe.)

Parce que nous ne traitons que des colonnes ici, nous appliquons uniquement la valeur d'espacement des colonnes, car il n'y a pas de lignes qui peuvent appliquer cette valeur.

Pour le plaisir, nous ajoutons également une ligne verticale entre ces colonnes:

article {
  display: grid;
  gap: 10px;
}

Veuillez vérifier l'exemple sur Codepen: La propriété CSS GAP: Utilisation de l'écart et de la règle de colonne dans la disposition multi-colonnes

Veuillez noter que column-rule est l'abréviation de column-rule-width, column-rule-style et column-rule-color.

À propos de gap Informations utiles sur les attributs

L'attribut

de la disposition de la grille gap est initialement appelé grid-gap, et sa forme complète est grid-row-gap et grid-column-gap. Bien que ces propriétés soient toujours valides, il est préférable de s'en tenir à gap car il convient désormais aux dispositions de grille, de flexion et de plusieurs colonnes.

La mise en page multi-colonnes a une propriété plus ancienne column-gap, qui est toujours valide également. Mais encore une fois, il est plus facile de se souvenir de gap dans tous les cas.

L'espacement peut être défini en pourcentage, mais le pourcentage est relatif à quel pourcentage? Cela dépend en fait de nombreux facteurs et peut être difficile à prévoir. Vous pouvez l'explorer plus loin dans la spécification. En règle générale, il est préférable d'éviter d'utiliser des pourcentages dans gap à moins que vous ne sachiez vraiment ce que vous faites.

Les propriétés d'alignement telles que

justify-content et align-content peuvent également séparer les éléments des dispositions de grille et de flexion, et dans certains cas, ils entraîneront l'espace des éléments au-delà de la valeur gap. Cependant, la valeur gap est toujours utile car elle fournit un espacement minimum entre les éléments sur un écran plus petit.

Pourquoi ne pas utiliser gap pour définir l'espacement de tous les éléments?

Comme mentionné ci-dessus, gap résout certains problèmes ennuyeux liés à l'espacement des marges. Ces problèmes de marge peuvent également affecter le texte et d'autres contenus. Par exemple, si nous utilisons la marge inférieure pour définir l'espacement des éléments de texte (tels que les paragraphes et les titres), il y aura des marges supplémentaires après le dernier élément, ou si nous utilisons la marge supérieure, le premier élément peut apparaître de plus marge. Il existe des moyens faciles de résoudre ce problème dans CSS, mais c'est toujours un lourdeur, et certains développeurs ont décidé d'utiliser gap à la place.

Pour utiliser gap pour définir l'espacement des éléments de texte, nous définissons simplement le conteneur de texte sur display: grid et ajoutons la valeur gap:

article > div {
  margin: 0 10px 10px 0;
}

Les

<code><p></p> , <h1></h1>, <h2></h2> et <hr> les éléments sont désormais des éléments de grille. Veuillez vérifier l'exemple sur Codepen: La propriété CSS GAP: Contenu du texte d'espacement avec GAP

Mais devrions-nous faire cela? Un inconvénient est que tous les éléments sont espacés de la même manière, et changer l'espacement entre les éléments, en particulier autour du titre, peut être visuellement plus attrayant. Cependant, c'est toujours une idée intéressante d'utiliser gap pour cela. Pour explorer cela davantage, consultez la vidéo très intéressante de Kevin Powell sur la définition de l'espacement de texte à l'aide de gap.

Résumé

Les propriétés

gap sont un outil pratique pour définir l'espacement des projets lors de l'utilisation de la grille, du flexible et des dispositions multi-colonnes. Il nous permet de ne plus avoir à utiliser l'ancienne méthode désordonnée margin. Il peut être utilisé de manière créative dans la conception, mais ne la dépassez pas!

lecture plus approfondie

• En savoir plus sur la disposition de la grille CSS
• En savoir plus sur Flexbox Layout
• En savoir plus sur la disposition CSS Multi-Colonne
• Lire des informations sur le module d'alignement CSS Box Spécification de niveau 3 ou MDN sur les gap Attributs

CSS gap Propriétés FAQ

Quelles sont les propriétés CSS gap?

CSS gap Les attributs sont des attributs abrégés pour row-gap et column-gap. Il spécifie la taille de l'espacement entre les lignes et les colonnes dans une grille, une disposition flexible ou multi-colonnes. Cette propriété est particulièrement utile pour créer des dispositions CSS visuellement attrayantes et bien structurées. Il aide à maintenir l'espacement et l'alignement cohérents dans les éléments de conception.

CSS gap Comment fonctionnent les attributs?

CSS gap Les propriétés fonctionnent en définissant la taille de l'espacement (espace) entre les lignes et les colonnes. La première valeur que vous fournissez définira l'espacement des lignes et la deuxième valeur définira l'espacement de la colonne. Si vous ne fournissez qu'une seule valeur, il définira l'espacement des lignes et des colonnes sur cette valeur. Par exemple, gap: 10px 20px définit l'espacement des lignes sur 10px et l'espacement de la colonne sur 20px.

Puis-je utiliser l'attribut CSS gap dans Flexbox?

Oui, vous pouvez utiliser l'attribut CSS gap dans Flexbox. Il vous permet de créer un espacement entre les projets Flex. Cependant, veuillez noter que cette fonctionnalité peut ne pas être prise en charge dans tous les navigateurs, en particulier dans les navigateurs plus âgés. Vérifiez toujours la compatibilité du navigateur avant de l'utiliser.

Quelle est la différence entre

et gap dans grid-gap?

L'attribut

grid-gap est un attribut abrégé pour grid-row-gap et grid-column-gap, dédié à la mise en page de la grille. Cependant, le module de disposition de la grille CSS Level 2 a remplacé grid-gap par gap. Maintenant, gap peut être utilisé pour les dispositions de grille, de flexion et de plusieurs colonnes.

Comment utiliser les propriétés CSS gap dans la conception réactive?

Vous pouvez l'utiliser dans une conception réactive en définissant l'attribut CSS gap à l'aide d'unités relatives telles que des pourcentages ou des unités de la fenêtre. De cette façon, la taille de l'espacement sera ajustée à la taille de la fenêtre ou de l'élément parent, ce qui rend votre disposition réactive.

Puis-je utiliser des valeurs négatives dans l'attribut CSS gap?

Non, vous ne pouvez pas utiliser des valeurs négatives dans l'attribut CSS gap. L'attribut gap accepte uniquement les valeurs non négatives. Si vous essayez d'utiliser une valeur négative, elle sera ignorée et la valeur par défaut sera utilisée.

CSS gap Quelle est la valeur par défaut de l'attribut?

La valeur par défaut de l'attribut

CSS gap est normal, ce qui signifie que le navigateur déterminera la taille de l'espacement. Cependant, vous pouvez remplacer cette valeur par défaut en spécifiant la taille d'espacement souhaitée.

Puis-je utiliser l'attribut CSS gap dans une disposition multi-colonnes?

Oui, vous pouvez utiliser l'attribut CSS gap dans une disposition multi-colonnes. Il vous permet de définir l'espacement entre les colonnes dans une disposition multi-colonnes.

CSS gap Les attributs sont-ils hérités?

Non, les attributs CSS gap ne seront pas hérités. Cela signifie que la taille d'espacement spécifiée pour l'élément parent n'est pas appliquée à ses éléments enfants.

Quelles unités puis-je utiliser dans l'attribut CSS gap?

Vous pouvez utiliser plusieurs unités dans l'attribut CSS gap, y compris les pixels (PX), les EM (EM), Rem (REM), pourcentages (%) et les unités de la fenêtre (VW, VH). Chaque unité a ses propres cas d'utilisation qui peuvent être utilisés en fonction de vos besoins spécifiques.

Veuillez noter que tous les liens Codepen sont des espaces réservés et doivent être remplacés par les liens réels disponibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!