Comment CSS Gap ajoute de l'espace pour améliorer les mises en page Web

Instructions pour utiliser la propriété CSS gap

Application de Gap aux mises en page à colonnes multiples

Points Essentiels

La propriété CSS gap offre une solution flexible pour gérer l'espacement entre les éléments.
gap est une propriété raccourcie qui peut accepter deux valeurs distinctes pour paramétrer les espacements entre les lignes et les colonnes.
L'attribut Gap est compatible avec les mises en page Flexbox, Grid, ainsi qu'avec les configurations multi-colonnes.

Le langage CSS propose divers outils pour l'organisation des éléments sur une page web, allant du positionnement absolu à des structures basées sur des grilles. La gestion des espaces, tant autour qu'entre les éléments, est tout aussi cruciale. La propriété gap se distingue comme un outil pratique et polyvalent pour créer des espaces blancs, et ce, dans divers contextes de mise en page.

Définition de l'Écart (gap)

La propriété CSS gap est un élément de style fondamental qui aide à définir l'espacement au sein de vos compositions de design. L'espacement entre les éléments est une règle de base pour créer un design visuellement plaisant et efficace.

Cette propriété permet de préciser la taille des intervalles entre les éléments dans trois types d'organisation :

Flexbox
Grid
Multi-colonnes

Tous les navigateurs modernes prennent en charge la propriété gap, venant compléter les fonctionnalités du modèle de boîte comme les marges (margin) et les espacements internes (padding).

Comment Formuler la Propriété CSS Gap

La syntaxe de base pour la propriété gap est la suivante :

 gap: <espace-lignes> <espace-colonnes>;

Chaque valeur peut être définie par une longueur ou un pourcentage. L'espacement des colonnes est optionnel; si absent, une valeur unique s'appliquera à la fois aux lignes et aux colonnes. Ainsi :

 gap: 10em;

... signifie que les espaces entre les lignes et les colonnes seront égaux à 10 fois la taille de la police actuelle. Alors que :

 gap: 20px 10%;

... créera un espace de 20 pixels entre les lignes et un espace entre les colonnes correspondant à un dixième de la largeur du conteneur parent.

La propriété gap s'utilise sur les éléments conteneurs, ceux qui définissent la structure de la mise en page, plutôt que sur les éléments à l'intérieur. Elle vise à instaurer un espacement uniforme entre les éléments, plutôt qu'un espacement variable et plus complexe.

Utilisation de Gap avec Flexbox

Vous pouvez utiliser gap pour ajuster l'espacement entre les lignes et les colonnes d'une disposition flexible. La direction de la disposition flexible, définie par `flex-direction`, détermine si l'espacement des lignes ou des colonnes est appliqué.

Par défaut, avec une direction de ligne normale, les éléments d'un conteneur flexible s'affichent côte à côte. Ce simple CSS :

 .flex-layout {
  display: flex;
}.flex-layout div {
  padding: 1em;
  margin: 10px;
  outline: 1px solid black;
}

Génère cette disposition :

Notez que chaque élément du conteneur utilise les propriétés habituelles du modèle de boîte, à savoir `padding` et `margin`, pour l'espacement. L'ajout de gap :

 .flex-layout { gap: 20px; }

Augmentera l'espace entre les éléments flexibles, mais sans modifier l'espace autour d'eux :

Si votre mise en page flexible affiche des éléments sur plusieurs lignes et colonnes, par encapsulation des éléments, comme avec le code ci-dessous :

 .flex-layout {
  gap: 20px 40px;
  flex-wrap: wrap;
}

Vous pourrez observer l'effet des deux valeurs d'espacement :

Gardez à l'esprit que des propriétés comme `margin` et `justify-content` peuvent aussi affecter l'espacement entre les éléments. Considérez la propriété gap comme un minimum, à moins que vous ne contrôliez explicitement toutes les autres propriétés influant sur l'espacement.

Utilisation de Gap avec la Grille (Grid)

La propriété Gap s'utilise aussi avec les mises en page en grille (Grid). La différence principale est qu'il est souvent nécessaire de spécifier les espacements entre les lignes et les colonnes, car le système de Grid est plus adapté aux mises en page à deux dimensions.

Comme avec les dispositions Flex, Grid affichera par défaut les éléments côte à côte. Vous pouvez cependant contrôler l'espacement autour de chaque élément en utilisant `padding` et `margin` :

 .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 mise en page de grille classique :

Ajout d'un gap :

 .grid-layout {
  gap: 80px 40px;
}

Insère un espace entre chaque élément :

Il est important de noter que les valeurs distinctes pour l'espacement des lignes et des colonnes s'appliquent ici, créant un espace entre les lignes qui est deux fois plus grand (80px) que l'espace entre les colonnes (40px). N'oubliez pas que si vous utilisez une seule valeur, l'écart sera le même entre les lignes et les colonnes.

Application de Gap aux Mises en Page Multi-colonnes

Vous pouvez aussi utiliser la propriété gap avec les mises en page multi-colonnes, mais dans ce cas une seule valeur est pertinente; il n'y a pas de lignes. Les mises en page à colonnes multiples ont un espacement par défaut :

 .column-layout {
  column-count: 3;
}

Cependant, cet espace est très faible, d'une taille de 1em :

Ceci est particulièrement visible lorsque vous variez la taille de la police et surtout, si vous justifiez le texte :

 .column-layout {
  font-size: 14pt;
  line-height: 1.4;
  text-align: justify;
}

Les lignes de texte résultantes se chevauchent et rendent la lecture inconfortable :

En spécifiant un gap, vous pouvez augmenter l'espace 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 rendu plus lisible, en fonction d'autres facteurs comme la largeur de vos colonnes :

N'oubliez pas que vous pouvez utiliser un outil de navigation, tel que les outils de développement de Google Chrome, pour contrôler vos mises en page et observer l'impact de propriétés comme `gap` et `margin` sur vos designs.

Lorsque vous employez deux valeurs pour gap, assurez-vous qu'elles soient dans le bon sens. L'ordre "ligne, colonne" pourrait paraître étrange, mais il correspond à l'ordre d'autres propriétés raccourcies comme `padding` et `margin`.

La manière précise dont vous utiliserez l'espace dépendra du modèle de mise en page que vous appliquez. Généralement, privilégiez la propriété `gap` quand vous avez besoin d'un espacement régulier entre les éléments, mais sans ajouter d'espace autour de ceux-ci.