Comment utiliser la propriété CSS Gap —

Dans cet article, nous explorerons les utilisations du CSS gap propriété, ce qui facilite grandement l’ajout d’espace entre les éléments et résout un certain nombre de problèmes de mise en page qui ont tourmenté les développeurs au fil des ans.

À quoi sert l’écart ?

Le gap La propriété nous permet d’ajouter de l’espace entre les éléments horizontalement et verticalement. Nous avons toujours pu le faire avec margin, bien sûr. Mais en utilisant margin espacer les éléments peut être pénible, en particulier lorsque les éléments s’enroulent sur des lignes, car il y a toujours ce dernier élément qui aura une marge indésirable.

Le stylo suivant montre quatre divs espacés avec des marges droite et inférieure :

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

Vous remarquez l’arrière-plan du conteneur qui dépasse à droite et en bas ?

Le gap la propriété ne met que de l’espace entre articles, ce qui le rend donc beaucoup plus facile pour la mise en page. Voici la même disposition que ci-dessus, mais cette fois en utilisant gap au lieu de margin:

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

Désormais, nous n’obtenons plus l’espace laid et indésirable à droite et en bas. L’écart se situe désormais uniquement entre les éléments, et ceux-ci s’intègrent parfaitement dans leur conteneur.

On peut utiliser gap avec trois modes de mise en page différents : Grille, Boîte flexibleet multi-colonnes. Nous les examinerons tour à tour ci-dessous.

Directives d’utilisation de la propriété Gap

En utilisant gap c’est aussi simple que d’écrire gap: 10px. (Nous avons vu le résultat dans la démo ci-dessus.) Mais regardons ce que cela signifie.

Le gap la propriété peut prendre deux valeurs : a rangée valeur (c’est-à-dire l’espace entre les rangées d’éléments), et un colonne valeur (l’espace entre les colonnes d’éléments) : gap: <row-gap> <column-gap>.

Si nous spécifions une seule valeur, elle s’appliquera à toutes les lignes et Colonnes.

Nous pouvons simplement spécifier un espacement de colonne ou de ligne séparément avec le row-gap et column-gap propriétés.

Valeurs pour gap peut être n’importe quelle unité de longueur (telle que px, em, vw), unité de pourcentage ou même valeur calculée avec le calc() fonction.

Comment utiliser la propriété gap avec CSS Grid

Nous avons vu un exemple ci-dessus de gap utilisé avec la disposition en grille. Essayons un autre exemple avec des unités différentes :

article {
  display: grid;
  gap: 30px 1em;
}

Cette fois, nous avons des unités différentes pour la ligne et la colonne.

Un bonus supplémentaire de gap est qu’il fonctionne de manière transparente sur les mises en page réactives. Si nous définissons un espace entre deux éléments, cet espace s’appliquera que les éléments soient placés côte à côte ou l’un au-dessus de l’autre, comme indiqué dans le stylo ci-dessous.

appuie sur le 0,5x en bas du stylo ci-dessus, ou ouvrez le stylo dans votre navigateur et élargissez et rétrécissez la fenêtre pour voir comment la direction de l’espace s’adapte à la disposition des cases. On bénéficie ici de la valeur unique sur le gap propriété, qui peut s’appliquer aux lignes et aux colonnes. Si nous ne le faisons pas vouloir l’écart entre les lignes sur des écrans plus petits, nous pourrions plutôt définir column-gap: 10px. Essayez ceci dans le stylo ci-dessus.

Pour en savoir plus sur l’utilisation des dispositions en grille, consultez notre guide du débutant sur la mise en page CSS Grid.

Comment utiliser la propriété Gap avec Flexbox

Lorsque Flexbox est sorti pour la première fois dans les rues, il n’y avait pas gap propriété, nous avons donc dû recourir à l’utilisation séculaire et pénible des marges. Heureusement, en utilisant gap avec Flexbox est désormais courant et bien pris en charge dans les navigateurs modernes.

Nous pouvons l’utiliser de la même manière que nous l’utilisons pour Grid :

article {
  display: flex;
  gap: 2vw 1vw;
  flex-wrap: wrap;
}

Dans les situations où nos éléments flexibles s’enroulent de manière réactive, les paramètres d’espacement seront redistribués selon les besoins et ne s’aligneront souvent pas verticalement et horizontalement, comme indiqué dans le stylet ci-dessous.

Si nous voulons que les espaces s’alignent horizontalement et verticalement, il est préférable d’utiliser Grid.

Comme avec Grid, si nous voulons uniquement des espaces entre les colonnes ou lignes, nous pouvons utiliser column-gap et row-gap séparément.

Comment utiliser la propriété Gap avec une mise en page multi-colonnes

La disposition multi-colonnes organise le contenu en colonnes, mais par défaut ces colonnes auront un espace de 1em défini par le navigateur. Nous pouvons utiliser le gap propriété pour définir notre largeur d’espacement préférée :

article {
  column-count: 2;
  gap: 3em;
}

(Essayez de retirer le gap propriété dans le stylo ci-dessus et voyez ce qui se passe.)

Comme nous travaillons uniquement avec des colonnes ici, seule une valeur d’espacement de colonne est appliquée, car il n’y a aucune ligne à laquelle appliquer cette valeur.

Juste pour le plaisir, ajoutons également une ligne verticale entre ces colonnes :

article {
  column-count: 2;
  gap: 3em;
  column-rule: 1px solid #e7e7e7;
}

Noter que column-rule est un raccourci pour column-rule-width, column-rule-styleet column-rule-color.

Choses utiles à savoir sur la propriété Gap

Le gap La propriété pour les mises en page en grille s’appelait initialement grid-gapavec les formes longues de grid-row-gap et grid-column-gap. Même si ces propriétés fonctionnent toujours, il est préférable de s’en tenir à l’utilisation gapcar cela fonctionne désormais avec Grid, Flexbox et multi-colonnes.

Les mises en page multicolonnes ont une version plus ancienne column-gap propriété, qui fonctionne également toujours. Mais encore une fois, c’est plus facile de se souvenir gap dans tous les scénarios.

UN gap peut être défini comme un % valeur, mais un pourcentage de quoi ? Cela dépend en fait d’un certain nombre de facteurs et cela peut être quelque peu difficile à prévoir. Vous pouvez explorer cela plus en détail dans le spécification. En règle générale, à moins de savoir vraiment ce que vous faites, il est plus prudent d’éviter les pourcentages avec gap.

Propriétés d’alignement telles que justify-content et align-content servent également à espacer les éléments dans les mises en page Grid et Flexbox, et dans certaines circonstances, ils espaceront les éléments plus loin que votre gap valeur. Le gap la valeur est toujours utile, car elle fournit au moins une le minimum espace entre les éléments sur des écrans plus petits.

Pourquoi ne pas espacer tous les éléments avec un espace ?

Comme indiqué ci-dessus, gap résout certains problèmes ennuyeux associés à l’espacement des marges. Ces problèmes de marge peuvent également affecter des éléments tels que le texte. Par exemple, si nous espacons des éléments de texte, tels que des paragraphes et des titres, avec une marge inférieure, nous obtiendrons une marge indésirable après l’élément final, ou si nous utilisons une marge supérieure, nous pourrions nous retrouver avec une marge supérieure indésirable sur le texte. premier élément. Il existe des moyens simples de gérer cela en CSS, mais cela reste pénible, et certains développeurs ont décidé d’utiliser gap plutôt.

Utiliser gap pour espacer les éléments de texte, nous définissons simplement le conteneur de texte sur display: grid et ajoutez un gap valeur:

article {
  display: grid;
  gap: 1em;
}

Le <h1>, <h2>, <p> et <ul> les éléments sont désormais tous des éléments de grille.

Mais devrions-nous faire cela ? L’un des inconvénients est que l’espacement est le même pour tous les éléments, et il peut être plus attrayant visuellement de varier l’espacement entre les éléments, en particulier autour des titres. En utilisant gap car c’est quand même une idée intéressante. Pour approfondir cela, regardez la vidéo très intéressante de Kevin Powell sur utiliser l’espace pour espacer le texte.

Emballer

Le gap La propriété est un outil pratique pour espacer les éléments lors de l’utilisation de mises en page Grid, Flexbox et multi-colonnes. Cela nous évite d’avoir à utiliser les anciens hacks de marge compliqués. Il peut être utilisé de manière créative tout au long d’une conception, mais n’en faites pas trop !

Lectures complémentaires