CSS offre de nombreuses façons de disposer les éléments sur vos pages Web, du positionnement absolu à la conception basée sur une grille. Les espaces autour et entre les éléments sont tout aussi importants, et encore une fois, il existe de nombreuses options. La fonctionnalité Gap est un moyen utile et polyvalent d’introduire des espaces blancs et fonctionne avec de nombreuses mises en page Web différentes.
L’utilisation de la propriété gap en CSS est un moyen pratique d’améliorer la mise en page des sites Web. La fonctionnalité Gap vous permet d'ajouter de l'espace entre les éléments de manière élégante, ce qui améliore la navigation et l'expérience utilisateur. Dans ce guide, nous verrons comment utiliser efficacement la propriété Gap en CSS pour améliorer vos conceptions sur le Web. Vérifier Les meilleurs projets HTML et CSS pour les débutants.
Qu’est-ce que la propriété Gap ?
Gap en CSS est une propriété de style simple mais essentielle pour vous aider à définir l'espacement entre vos mises en page de conception. Prévoir un espace adéquat entre vos éléments est une des règles d’or de la composition que vous devez appliquer pour un graphisme intéressant et épuré. La propriété Gap détermine les espaces verticaux et horizontaux entre les éléments et leur donne un espacement. Par conséquent, l’utilisation de Gap facilite une conception appropriée et une meilleure organisation des éléments, sans qu’il soit nécessaire d’utiliser des codes supplémentaires pour ajouter des séparateurs entre les éléments.
Vous pouvez utiliser cette propriété pour spécifier la taille des espaces entre les éléments dans trois formats de présentation :
- Disposition flexible des boîtes (« Flexbox »).
- Disposition de la grille.
- Disposition multi-colonnes().
Tous les navigateurs modernes prennent en charge la propriété gap, qui complète les propriétés de formulaire de boîte telles que margin et padding.
Comment écrire la propriété gap en CSS
La syntaxe de base de la propriété Gap est :
gap: <row-gap> <column-gap>; Chaque valeur peut prendre une longueur ou un pourcentage, et les espaces entre les colonnes sont facultatifs ; Sans cela, une seule valeur sera appliquée aux lignes et aux colonnes. Donc:
gap: 10em; ... signifie que les lignes et les colonnes auront un espace 10 fois supérieur à la taille de police actuelle, tandis que :
gap: 20px 10%; ... produira un espacement des lignes de 20 pixels et un espacement des colonnes d'un dixième de la largeur de l'élément conteneur.
Vous devez utiliser la propriété Gap avec des éléments de conteneur qui définissent la présentation, plutôt qu'avec des éléments à l'intérieur du conteneur. La propriété vise à créer une distance uniforme entre les éléments au lieu de distances variables plus complexes.
Utiliser la fonctionnalité Gap avec Flexbox
Vous pouvez utiliser la propriété Gap pour contrôler l'espace entre les lignes et les colonnes créé par une présentation flexible. L'orientation flexible utilisée par votre mise en page déterminera si l'espace entre les éléments d'une ligne ou l'espace entre les éléments d'une colonne s'applique.
Par défaut, dans l'orientation normale des lignes, les éléments à l'intérieur du conteneur flexible apparaîtront les uns à côté des autres. Voici le code CSS simple :
.flex-layout {
display: flex;
}
.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
} Cette mise en page produit :
Notez que chaque élément à l'intérieur du conteneur utilise les propriétés du modèle de boîte classique pour l'espacement : padding et margin. En ajoutant un espace entre les éléments :
.flex-layout { gap: 20px; } Cela augmentera l'espace entre les éléments flexibles, mais pas autour d'eux :
Si votre mise en page flexible affiche les éléments dans les colonnes et les lignes, en encapsulant les éléments, par exemple :
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
} Vous verrez l’effet des deux vulnérabilités :
Gardez toujours à l’esprit que d’autres propriétés, telles que la marge et la justification du contenu, peuvent affecter l’espacement entre les éléments. Considérez Gap comme une valeur minimale, sauf si vous contrôlez explicitement toutes les autres propriétés pouvant affecter l'écart. Vérifier Des jeux amusants pour vous aider à apprendre facilement la programmation CSS.
Utiliser la fonctionnalité Gap avec le réseau
Vous pouvez également utiliser Gap avec une disposition en grille. La principale différence est que vous devrez généralement spécifier un espace entre les éléments dans les lignes et les colonnes, car la grille est plus adaptée aux mises en page 2D.
Comme dans la disposition fluide, la grille affichera les éléments les uns à côté des autres par défaut, bien que vous puissiez contrôler l'espacement autour de chaque élément à l'aide du remplissage et de la marge :
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}
.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
} Le résultat est une disposition de réseau typique :
En ajoutant Gap :
.grid-layout {
gap: 80px 40px;
} Un espace sera inséré entre chaque élément :
Remarquez comment les valeurs d'espacement des lignes et des colonnes individuelles sont appliquées ici, créant un espace entre les éléments des lignes qui est deux fois la taille (80 pixels) de l'espace entre les colonnes (40 pixels). N'oubliez pas que si vous utilisez une valeur unique, vous spécifierez la même distance entre les lignes et les colonnes.
Utilisez la propriété Gap avec des mises en page multi-colonnes
Vous pouvez également utiliser la propriété Gap avec des dispositions de colonnes, mais une seule valeur est pertinente dans ce cas ; Il n'y a pas de lignes. Les mises en page à plusieurs colonnes ont un espace par défaut :
.column-layout {
column-count: 3;
} Mais il est très petit avec une taille de 1em :
Ceci est particulièrement visible lors du changement de police, et surtout si vous alignez le texte :
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
} 
Les lignes de texte qui en résultent se heurtent les unes aux autres et deviennent inconfortables à lire :
En spécifiant un espace entre les éléments, vous pouvez augmenter la distance entre les colonnes, leur donnant ainsi plus d'espace.
.column-layout {
gap: 2em;
} Vous constaterez peut-être que 2em ou même 3em donnent un résultat plus lisible, en fonction d'autres facteurs tels que la largeur des colonnes :
N'oubliez pas que vous pouvez utiliser un plugin de navigateur tel que Outils de développement Google Chrome Pour vérifier vos mises en page et voir comment des propriétés telles que l'espace et la marge affectent vos mises en page.
Lorsque vous utilisez deux valeurs pour la propriété Gap, assurez-vous qu'elles sont correctement définies. L'ordre des « lignes et colonnes » peut être contre-intuitif, mais il correspond à l'ordre d'autres propriétés de raccourci telles que le remplissage et la marge.
La manière exacte dont vous utiliserez la fonctionnalité Gap variera en fonction de la mise en page à laquelle vous l'appliquez. En général, cependant, vous devez accéder à la propriété Gap lorsque vous avez besoin d'une distance uniforme entre les éléments, mais pas autour d'eux. Vous pouvez maintenant visualiser Alternatives ChatGPT avancées qui fournissent des scripts d'application automatisés.
