Une de mes parties préférées de la spécification CSS Grid est le
grid-gap . Ils facilitent le retrait entre les éléments de la grille.
Les marges et les techniques auxquelles nous avons recours pour les implémenter dans différentes situations ont longtemps été l'un des principaux points gênants du CSS.
Le W3C a recommandé d'abandonner la propriété
grid-gap au profit d'un simple
gap et de son utilisation dans Flexbox et Multi-Column.
Dans ce guide, nous verrons comment les marges ont été ajoutées à Flexbox auparavant et comment la propriété de l'
gap fait, ce qui nous permet d'obtenir une indentation sans ajustements supplémentaires.
Marges dans une grille Flexbox régulière
Dans cet exemple, nous allons prendre un groupe de blocs, utiliser Flexbox pour créer un style de maillage, puis séparer les blocs les uns des autres à l'aide de marges.
Commençons par le HTML de base. Nous avons un ensemble
flex-container flex-item. <div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>
Grâce au comportement de Flexbox, le contenu sera situé côte à côte. Sur la base de la valeur de la largeur du conteneur, nous déterminons la taille des enfants, puis leur permettons d'être transférés à l'aide de la propriété
flex-wrap .
.flex-container { display: flex; flex-wrap: wrap; } .flex-item { width: calc(100% / 3); }
Cela nous donne des blocs de taille parfaite égale à 1/3 de la largeur du conteneur. Définissons des marges pour ajouter un espace vertical et horizontal entre chaque élément.
.flex-item { width: calc(100% / 3); margin-right: 1rem; margin-bottom: 1rem; }
Aïe! Nos éléments, qui représentent 1/3 du conteneur, ne correspondent plus à la largeur de l'élément parent. Bien que les marges entre les lignes se soient avérées tout à fait correctes et n'ont pas causé de problèmes.
Nous devrons définir la largeur des enfants, en tenant compte de l'espace supplémentaire créé par la marge. Vous devez également définir la propriété
margin-right sur zéro pour chaque troisième élément.
Maintenant, nous avons deux marges égales à
1rem et nous devons soustraire ces
2rem uniformément de la largeur des trois éléments.
flex-item { // width: calc(100% / 3); width: calc((100% / 3) - (2rem / 3)); // one-third - two margins divided equally among 3 items margin-right: 1rem; margin-bottom: 1rem; } .flex-item:nth-child(3n) { margin-right: 0; }
Ça a l'air trop dur? Pour moi, oui. Il existe des moyens plus simples de le faire, mais ils ne vous donnent pas non plus l'espacement exact 1rem entre les colonnes. Ce code complexe complique également considérablement la conception réactive.
Lorsque la propriété gap devient disponible pour une utilisation dans Flexbox dans tous les navigateurs, le code devient beaucoup plus propre. Nous pouvons également passer de la définition de la largeur pour les enfants à l'utilisation des propriétés
flex-grow ,
flex-shrink et
flex-basis .
Indentation avec Gap
En utilisant la propriété gap, nous nous débarrassons de la nécessité de faire la plupart des tours avec la largeur des éléments. Cela nous permet également de revenir à l'utilisation des valeurs flex-grow / flex-shrink.
Dans l'exemple suivant, nous utilisons toujours les propriétés
display: flex et
flex-wrap: wrap pour notre conteneur, mais maintenant nous ajoutons également la propriété
gap . Il s'agit d'une propriété abrégée qui combine l'
row-gap et l'
row-gap column-gap . Consultez la
documentation MDN pour toutes les méthodes.
Maintenant, au lieu de définir la largeur de chaque élément flexible, nous définissons les valeurs flex-grow, flex-shrink et flex-based. La propriété
flex-basis déterminera le nombre de colonnes que les navigateurs installeront dans le conteneur. Nous utiliserons toujours la fonction
calc() pour cela, mais le code finira par devenir plus propre
.flex-container { display: flex; flex-wrap: wrap; gap: 1rem; } .flex-item { flex: 1 1 calc((100% / 3) - 2rem); }
Un lecteur attentif remarquera également que cela permet désormais aux derniers éléments de grossir pour remplir l'espace de la ligne dans laquelle les éléments manquent. C'est ce que CSS Grid et Flexbox en fonction de la largeur des éléments ne peuvent pas faire pour nous.
Bonus: Gap facilite également la réactivité.
Dans notre exemple d'origine, si nous voulions changer le nombre de colonnes de conteneur à certains points de contrôle, nous devions recalculer la largeur ET changer les sélecteurs
nth-child pour se débarrasser des marges.
Dans l'exemple de l'
gap , tout ce que nous devons faire est d'ajuster la propriété flex-base, et vous avez terminé.
.flex-item { flex: 1 1 100%; // 1 across at mobile } @media (min-width: 640px) { .flex-item { flex-basis: calc((100% / 2) - 1rem); // 2 across at tabletish } } @media (min-width: 1024px) { .flex-item { flex-basis: calc((100% / 3) - 2rem); // 3 across at desktop } }
Je ne vais pas mentir, je
préfère toujours CSS Grid pour un tel modèle de conception, mais j'espère que vous verrez quelques exemples d'utilisation de cette incroyable nouvelle fonctionnalité.
Tourné vers l'avenir
Maintenant, la propriété gap n'est prise en charge que dans Firefox. Donc, si cet article vous intéresse, je m'excuse humblement. Vous devrez attendre que les autres navigateurs se rattrapent. J'espère qu'ils remarquent la douleur des développeurs liée aux marges et nous donnent tôt ou tard de nouvelles opportunités.
Ajout du traducteur
Il semble qu'il existe encore une astuce qui vous permet de vous débarrasser du besoin maintenant en utilisant, par exemple,
nth-child(3n) pour supprimer les marges droites des éléments Flex adjacents au bord droit du conteneur, et même en corrigeant à chaque fois le nombre de colonnes dans Flex- change conteneur.
Bien sûr, il n'est pas non plus parfait et se présente comme suit:
- Dans le balisage HTML, enveloppez le conteneur Flex dans une balise wrapper facultative
- Pour les enfants, par exemple, au lieu de
margin-right: 10px , définissez margin-left: 10px - Et pour compenser le retrait gauche croissant, il est nécessaire de définir une propriété pour le conteneur Flex avec une valeur de
margin-left: -10px; négative margin-left: -10px;
Le résultat peut être consulté sur
CodePen