Grille ou Flexbox?

Michelle Barker, l'auteur du matériel que nous publions aujourd'hui, dit que la récente discussion sur Twitter lancée par Chris Koyer lui a fait réfléchir sur la façon dont les développeurs Web choisissent entre les technologies CSS Grid Layout et CSS Flexbox Layout lors du développement de mises en page.



Chris Koyer dans son tweet a posé une question au public sur la façon dont ceux qui savent ce que Grid et Flexbox préfèrent expliquer la différence entre ces technologies.

Parmi les réponses à cette question, qui, selon Michelle, était très attendue, il a été possible de noter les précieuses idées de Rachel Andrew et Jen Simmons.

Rachel a déclaré que la technologie Flexbox est conçue pour développer des dispositions unidimensionnelles qui décrivent la façon dont les éléments sont disposés dans une ligne ou une colonne. Et la technologie Grid est conçue pour développer des dispositions en deux dimensions qui incluent à la fois des lignes et des colonnes.

Jen dit que la technologie Grid est utilisée pour décrire les dispositions de lignes et de colonnes. Dans ce cas, le contenu sera situé dans les cellules de la mise en page exactement comme le développeur en a besoin. Lorsque vous utilisez Flexbox, ce n'est pas le cas, et il ne s'agit pas seulement de placer des données dans la deuxième dimension (c'est déjà compréhensible), mais aussi de les placer dans une dimension. La technologie Flexbox ne convient pas dans la plupart des cas où elle est utilisée.

Michelle note que la simple lecture de tweets ne révèle pas les caractéristiques de l'utilisation des technologies Grid et Flexbox. Dans cet article, elle souhaite parler du moment et de l'endroit où utiliser ces technologies, ainsi que des raisons pour lesquelles une technologie peut être préférée à une autre.

En lisant les réponses à la question de Chris, Michelle a été surprise par le nombre de personnes qui ont déclaré qu’elles utiliseraient la grille uniquement pour les mises en page et la Flexbox pour tout le reste. Si vous respectez également une telle règle, cela signifie que vous vous limitez sérieusement à l'utilisation des puissantes capacités de Grid dans diverses situations. La principale chose que l'auteur du matériel aimerait recommander aux développeurs Web est que chaque mise en page doit être perçue comme quelque chose de spécial, analyser les capacités disponibles et ne pas faire d'hypothèses sur les technologies qui seront nécessaires pour la créer. Voici quelques questions que vous pouvez vous poser lors du choix d'une technologie adaptée au développement de la mise en page.

Combien de calculs devez-vous faire?

Voici ma réponse à la question de Chris. J'ai dit ensuite que s'il me semble que lors de la création de la mise en page, vous devez utiliser la fonction CSS calc() trop souvent, cela signifie généralement que j'ai besoin de la technologie Grid, pas de Flexbox.

Si vous devez souvent recourir à la fonction calc() pour calculer avec précision les tailles des lignes et des colonnes (si vous devez prendre en compte les champs internes, par exemple), cela indique souvent que vous devriez envisager d'utiliser la technologie Grid, car l'utilisation de l'unité mesurer fr vous simplifiera grandement la vie. Bien que, en tant que recommandation générale, ce conseil soit tout à fait viable, il ne décrit pas l’image complète de ce qui se passe. Parfois, Grid peut également être nécessaire dans les cas où la fonction calc() n'est pas utilisée lors de la construction de la disposition. Par exemple, dans une situation où nous parlons d'une mise en page bidimensionnelle à largeur fixe, dont les éléments font 200 pixels de large. Lors du développement d'une telle disposition, la fonction calc() n'est pas nécessaire pour connaître la largeur des éléments, mais en même temps, le comportement des dispositions construites sur la base de la grille peut être extrêmement utile. De même, des situations sont possibles dans lesquelles il est préférable d'utiliser Flexbox et inévitablement d'utiliser la fonction calc() . Par conséquent, ce dont nous parlons ici est mieux perçu non pas comme une règle rigide, comme ceci: «Utilisez calc() et Flexbox? Vous devez donc passer à Grid », mais à titre d'information.

Une dimension ou deux?

Une différence sérieuse entre les technologies Grid et Flexbox est que la première vous permet de contrôler la disposition des éléments en deux dimensions (en lignes et colonnes), et la seconde ne le permet pas. Encore une fois, cela ne signifie pas que vous ne devez jamais utiliser Grid pour des dispositions unidimensionnelles. Je choisis souvent la grille - dans les cas où j'ai besoin d'une grande précision pour contrôler la taille et la position des éléments situés dans une dimension. Cette approche est illustrée dans cet exemple sur CodePen et dans cet article complémentaire.


Exemple de grille

Comment les éléments devraient-ils se comporter?

La technologie de grille est souvent judicieuse à utiliser dans les cas où le développeur a besoin de contrôler le comportement de la mise en page en deux dimensions. Cependant, cela ne signifie pas que la grille est toujours meilleure que Flexbox. Lors de l'utilisation de la grille, le développeur a à sa disposition des lignes et des colonnes, des cellules et les zones dites de grille, qui sont une cellule ou un groupe de plusieurs cellules. Lorsque vous utilisez une grille, les éléments doivent être situés dans ces cellules ou zones.

Supposons que nous ayons une disposition basée sur une grille qui diffère par les caractéristiques suivantes: il y a neuf éléments situés sur trois rangées de trois éléments de gauche à droite, il y a 20 pixels entre les éléments. Une telle disposition peut être créée à l'aide de Grid et de Flexbox. Le code pour décrire une telle disposition basée sur une grille est beaucoup plus simple et plus propre:

 .grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-rows: 200px;   /*     ,   ,      .        , `auto`,  ,        . */   gap: 20px; } 

L'utilisation d'une telle disposition conduit au fait que les éléments sont placés automatiquement, alors que nous n'avons rien d'autre à faire. Si nous nous laissons du temps pour réfléchir, nous pouvons utiliser les fonctions Grid auto-fit() et minmax() , qui nous permettront d'obtenir une mise en page entièrement réactive sans utiliser de requêtes multimédias. Ouvrez cet exemple, essayez de redimensionner la fenêtre et regardez ce qui se passe.


Exemple de grille

Vous pouvez en savoir plus sur cette technique, ainsi que sur d'autres choses utiles, en regardant cette vidéo.

Si nous avons créé une disposition similaire à l'aide de Flexbox, alors, contrairement à l'exemple qui vient d'être décrit, nous aurions besoin de styliser à la fois les éléments et le conteneur:

 .grid {   display: flex;   flex-wrap: wrap;   margin: -10px;   width: calc(100% + 20px); } .item {   width: calc((100% / 3) - 20px);   flex: 0 0 auto;   margin: 0 10px 20px 10px; } 

Ici, dans le conteneur, vous devrez spécifier une valeur négative pour la propriété margin - afin de neutraliser le fait que la largeur totale des éléments est plus grande que le conteneur lui-même, et donc de transférer les données vers la ligne suivante. De plus, cet exemple ne peut pas démontrer le même comportement réactif sans effort supplémentaire de notre part. En outre, il convient de noter que l'utilisation de requêtes multimédias peut probablement être requise ici.

Voici un exemple sur CodePen qui illustre ce qui précède.


Exemple de Flexbox

Il existe plusieurs façons de créer la même mise en page à l'aide de Flexbox, mais toutes nécessitent l'utilisation de certains «hacks», et cela se produit pour la raison que c'est leur nature. En fait, nous parlons du fait que nous essayons d'utiliser la technologie Flexbox pour ce à quoi elle n'est pas vraiment destinée. Mais cela ne signifie pas que Flexbox est toujours un choix infructueux de la base de la mise en page.

De nombreux frameworks CSS modernes utilisent une variante de cette méthode pour représenter les mises en page. Et au fait, si vous voulez aller dans ce sens, je peux recommander Susy , un ensemble d'outils qui prend toutes les difficultés pour créer de telles mises en page.

Alors, quoi de mieux dans cette situation? Grille ou Flexbox? Il semble que Grid présente des avantages indéniables ici, mais pour répondre à cette question, nous devons réfléchir à ce qui devrait se passer si nous avons plus de neuf, mais moins de 12 éléments (s'il y en a par exemple, 12, cela leur permettra de remplir complètement une nouvelle ligne). Avons-nous besoin que les nouveaux éléments soient simplement au début de la ligne suivante, comme c'était le cas dans les exemples que nous avons vus? Ou avons-nous besoin qu’ils se comportent différemment? Peut-être que s'il n'y a qu'un seul élément dans la ligne suivante, alors nous en avons besoin pour occuper tout l'espace de cette ligne, comme dans l'option A de l'exemple suivant? Ou peut-être que s'il n'y a que deux éléments dans la nouvelle ligne, nous avons besoin qu'ils soient centrés, comme dans l'exemple B?


Différentes options pour placer des articles sur la dernière ligne

Lorsque vous utilisez une disposition basée sur une grille avec un placement automatique des éléments, nous n'avons qu'une seule option: placer un nouvel élément dans une cellule accessible située à gauche. Une disposition similaire d'éléments peut être trouvée dans les exemples précédents. Ici, nous partons de l'hypothèse que la propriété direction n'est pas définie sur rtl (dans ce cas, les éléments seraient situés de droite à gauche, et le seul élément de la dernière ligne serait situé dans la cellule de droite). Par conséquent, les nouveaux éléments lors de l'utilisation de la grille sont placés dans les cellules de grille disponibles suivantes. La technologie Flexbox vous permet de contrôler de manière flexible la disposition des articles. Cela signifie que nous pouvons contrôler le comportement des éléments en utilisant une combinaison de propriétés qui contrôlent le placement des éléments et leur alignement.

Voici un exemple qui illustre de telles dispositions, lors de l'utilisation d'un ou deux éléments par ligne, calculés sur trois éléments, occupent cette ligne entière.


L'élément occupe tout l'espace de ligne disponible.

En conséquence, il s'avère que quelle que soit la technologie utilisée pour créer la mise en page, tout se résume au type de comportement que les éléments situés dans la mise en page intéressent le développeur. Et dans différentes situations, différentes réponses peuvent être données à la même question.

Essayez-vous de remplacer Flexbox par une grille?

Lorsque je parle lors de divers événements, les gens me demandent souvent quand j'utiliserais Flexbox au lieu de Grid, et si nous avons vraiment besoin d'une technologie comme Flexbox. Comme nous l'avons vu dans l'exemple précédent, Grid ne remplace pas Flexbox. Les deux technologies coexistent en toute tranquillité, et la connaissance des situations dans lesquelles chacune d'entre elles se montre le mieux élargit les possibilités de conception de schémas.


Exemple de composant

Cette figure montre un composant, au cours du travail avec lequel il est nécessaire de contrôler le placement du texte, de l'image et du titre, à la fois en tenant compte des colonnes et en tenant compte des lignes. Ici aussi, vous devez contrôler la façon dont ils interagissent dans une certaine mesure entre eux. La seule façon de résoudre ce problème de manière satisfaisante est d'utiliser la technologie Grid.
Mais sans hésitation, j'utiliserai la technologie Flexbox pour créer un menu de navigation, comme celui montré dans cet exemple.


Menus créés par Flexbox

Ici, il est nécessaire de contrôler la disposition des éléments dans une seule dimension, et il est nécessaire que les éléments se comportent de manière flexible. La technologie Flexbox fait parfaitement son travail. Grâce à l'utilisation de Flexbox, vous pouvez spécifier si ces éléments doivent être placés sur de nouvelles lignes ou non, ce qui vous permet de les afficher avec précision si l'espace disponible sur la page ne vous permet pas d'afficher tous les éléments sur une seule ligne.

À quoi devrait ressembler la mise en page dans les navigateurs qui ne prennent pas en charge la technologie Grid?

Si nous utilisons la technologie Grid, l'un des problèmes possibles que nous devons prendre en compte est la prise en charge du navigateur pour cette technologie. Immédiatement, nous devons réfléchir à ce qui se passera si notre page est affichée dans l'un des navigateurs qui ne prennent pas en charge Grid (par exemple, dans IE 11 et ci-dessous). Mon approche pour résoudre ce problème consiste à utiliser les règles @supports et à préparer du code pour différents navigateurs. Souvent (mais pas toujours), en remplacement d'une mise en page basée sur une grille, j'utilise une mise en page basée sur Flexbox pour des navigateurs assez anciens.

 .grid {   display: flex;   flex-wrap: wrap;   /*  ,     */ } @supports (display: grid) {   .grid {       display: grid;       /*  ,  Grid */   } } 

Certes, il convient de noter ici que si vous vous retrouvez à passer de nombreuses heures à essayer de recréer sans utiliser la grille, ce qui a été fait avec cette technologie, alors peut-être que vous n'aviez pas grand-chose dès le début il existe de nombreuses raisons d'utiliser Grid. Après tout, cette technologie est particulièrement bonne en ce qu'elle est capable de ce qui ne peut pas être fait exclusivement avec Flexbox.

Résumé

Nous avons discuté de quelques exemples très simples et très répandus de développement de mise en page, examiné les caractéristiques de l'utilisation des technologies Grid et Flexbox dans leur construction. Nous espérons que nous avons pu donner matière à réflexion à ceux qui sont occupés à choisir la bonne technologie pour leur prochain aménagement.

Chers lecteurs! Dans quelles situations utilisez-vous la technologie Grid et dans quelle - Flexbox?