Tous ceux qui ont fait au moins un peu de développement de site Web savent que les balises
<div> sont un élément de construction important pour contrôler la mise en page.
HTML5 a introduit de nouveaux éléments sémantiques pour aider à cela. Et bien qu'ils soient un ajout fantastique à la langue, ils ressemblent un peu à la décoration de notre soupe avec des éléments
<div> .
Avec l'avènement de CSS Grid, nous n'avons plus besoin de compter sur des éléments
<div> pour créer une structure de page ou un composant encore plus complexe. La structure est littéralement déterminée par l'élément parent, et non par la façon dont le contenu est situé à l'intérieur.
Cela signifie que nous pouvons obtenir une belle mise en page simple qui structure le contenu sans prêter attention à la façon dont il a été initialement organisé à l'aide des éléments
<div> .
CSS Grid peut être compliqué, mais Flexbox aussi
J'ai entendu beaucoup de gens se plaindre que la grille est trop complexe et que Flexbox fait le même travail. Je dirais qu'ils sont simplement à l'aise avec Flexbox et n'ont donc aucune envie d'en savoir plus sur CSS Grid.
La technologie CSS Grid introduit de nombreuses nouvelles propriétés et valeurs, donc oui, il y a une courbe d'apprentissage. Mais Flexbox est également assez compliqué.
Pouvez-vous parler des avantages de l'utilisation de la propriété
flex-basis au lieu de la
width ? Ou comment Flexbox calcule-t-il la largeur des éléments flexibles si nous ne l'avons pas explicitement définie?
Par exemple, si vous montrez l'exemple ci-dessous à quelqu'un qui n'a jamais utilisé Flexbox, comment expliquez-vous le fait qu'il a la même disposition et les mêmes styles pour les deux ensembles de colonnes? Pour aggraver les choses, la deuxième colonne dans les deux cas est large de 50%. De toute évidence, une largeur de 50% ne définit pas réellement la taille de l'élément à 50%.
"Eh bien, tout commence par le fait que les éléments sont compressés s'il n'y a pas assez d'espace dans le conteneur, donc, même si nous définissons la largeur de l'élément = 50%, il n'a pas assez d'espace, donc il commence à se comprimer pour se faufiler dans le conteneur, puisque l'autre
<div> nécessite plus d'espace. 50% est plus probablement la taille idéale pour le bloc, mais pas la taille réelle. "
«Ainsi, dans l'exemple ci-dessus, le contenu du premier bloc est si volumineux qu'il crée un problème, car, en tant qu'élément flexible, par défaut, il a tendance à rétrécir pour s'adapter au contenu. Dans cet exemple, cet élément a beaucoup de contenu, donc ...
Alors oui, Flexbox est génial et fait un excellent travail de création de mises en page, mais ne me dites pas que c'est simple. Dès que vous passez d'exemples idéaux à des tâches professionnelles, un tel comportement est souvent loin d'une compréhension intuitive, et parfois il peut être franchement étrange.
Une grille est complexe en ce qu'elle implique de nombreuses nouvelles propriétés et valeurs, mais elles nous donnent beaucoup plus de contrôle que la flexbox.
Dans cet article, je voudrais examiner comment ce niveau de contrôle supplémentaire aide à simplifier notre balisage et nous permet d'écrire moins de code, sans même avoir à apprendre à utiliser un certain nombre de ses fonctions bizarres.
Limitations de Flexbox
Même si nous prenons un composant simple et le créons à l'aide de flexbox, du fait qu'il n'agit qu'en 1 dimension (les éléments flex sont des lignes ou des colonnes, ils ne peuvent pas être les deux), nous avons beaucoup le nombre d'éléments utilisés pour créer des lignes, qui peuvent ensuite être divisés en colonnes.
Par exemple, si nous travaillons sur une carte comme celle-ci:
Ce n'est pas une mise en page compliquée, mais nous devons encore organiser notre contenu d'une manière plutôt spécifique pour le faire fonctionner.
Dans cette situation, les blocs jaune et orange sont nécessaires pour que lors de l'ajout de la propriété display: flex pour l'élément .card (bloc rouge), deux colonnes soient créées. Ainsi, pour structurer tout le contenu, nous obtenons un balisage qui ressemble à ceci:
<div class="card"> <div class="profile-sidebar"> </div> <div class="profile-body"> </div> </div>
Une fois que vous aurez compris le fonctionnement de Flexbox, il sera facile de comprendre cette structure.
Lorsque nous ajoutons la propriété
display: flex pour l'élément
.card , nous obtenons deux colonnes, après quoi nous devrons styliser chacune d'elles séparément.
Voici un exemple de travail avec tous les styles:
Le fait est que lorsque nous créons des colonnes de contenu, nous obtenons un balisage un peu plus compliqué, et nous nous limitons également, car nous forçons différentes parties du contenu à se regrouper.
Simplifiez tout avec CSS Grid
Étant donné que CSS Grid est bidimensionnel, il nous permet de créer des lignes et des colonnes en même temps, ce qui signifie que le conteneur de grille (sur lequel nous définissons la propriété
display: grid ) a un contrôle total sur la disposition à l'intérieur de nous-mêmes.
Auparavant, cela nécessitait des éléments supplémentaires, comme dans l'exemple Flexbox ci-dessus. En utilisant la grille, nous pouvons nous en débarrasser complètement.
<div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img"> <ul class="social-list"> ... </ul> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info">Lorem ipsum ...</p> </div>
Du point de vue du balisage, cela n'a-t-il pas plus de sens?
Il y a un élément avec la classe
.card dans lequel nous mettons son contenu immédiat. Nous n'avons pas à nous soucier de la structure et de la disposition des éléments, nous mettons simplement le contenu dont nous avons besoin et nous continuons.
Structurer la mise en page
Tout comme lors de l'utilisation de Flexbox, nous devons encore structurer la mise en page, bien qu'en raison des spécificités de la grille, elle semble un peu différente.
C'est l'une des situations dans lesquelles les gens peuvent affirmer que la grille est plus compliquée, mais en fait, je dessine simplement des blocs autour de chaque élément de contenu.
À l'aide de Flexbox, nous avons créé deux blocs qui se sont démarqués sous forme de colonnes. Lors de l'utilisation de la grille, à la place, nous configurons la grille entière pour l'élément parent, puis indiquons aux éléments enfants où s'asseoir sur cette grille.
Pour configurer la grille, nous pouvons faire quelque chose comme ceci:
.card { display: grid; grid-template-columns: 1fr 3fr; }
L'unité de mesure fr est unique à la grille et indique la proportion d'espace disponible. Cette utilisation est très similaire à l'installation de deux colonnes dans Flexbox et à la détermination de ses largeurs de 25% et 75%, respectivement.
Placer des éléments sur une grille
Peut-être dû au fait que pendant de nombreuses années j'ai utilisé float pour créer du balisage, maintenant les situations dans lesquelles les éléments sont simplement situés exactement là où ils sont nécessaires semblent être peu magiques.
Vous pouvez utiliser
grid-row et
grid-column pour chaque élément pour les placer exactement où nous voulons, mais plus j'utilise Grid, plus je tombe amoureux de la propriété
grid-template-areas et place des éléments en utilisant des définitions de zone.
Cette approche prend un peu plus de temps, mais cela en vaut la peine, surtout lorsque nous créons un design adaptatif (nous y reviendrons bientôt).
Nous devons d'abord définir
grid-template-areas de
grid-template-areas pour l'élément
.card , après quoi nous pouvons affecter tous les éléments enfants à ces zones:
.card { ... display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "image name" "image position" "social description"; } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; }
Dans l'exemple ci-dessous, vous pouvez voir tout cela en action:
C'est aussi simple que ça
L'une des raisons pour lesquelles j'aime utiliser
grid-template-areas est que si quelqu'un d'autre regarde le code, il comprendra immédiatement ce qui se passe ...
Si quelqu'un vous montre le code dans lequel
grid-row grid-column et
grid-column sont spécifiées en utilisant des nombres et une
span , il est assez simple de calculer et de comprendre où et comment ils seront situés. Pour les mises en page simples ou pour utiliser span à certains endroits, je considère leur utilisation appropriée,
mais beaucoup plus agréable, en ne regardant que le code de l'élément parent, comprenez immédiatement à quoi ressemblera la mise en page entière .
Lorsque vous utilisez une grille, il est plus facile de connaître la taille réelle d'un élément
Dans notre tout premier exemple, où nous avons défini la largeur de l'un des éléments flexibles = 50%, en fait, elle n'était pas égale à 50%. Si vous comprenez pourquoi cela s'est produit, tant mieux, mais parfois cela peut toujours être ennuyeux. C'est assez facile à contourner, mais lorsque vous utilisez une grille, cela devient un problème beaucoup plus petit.
Puisque nous définissons la disposition entière, nous spécifions également exactement combien d'espace les éléments doivent occuper.
Et bien sûr, nous avons à notre disposition la fonction
minmax() et les unités de mesure
fr , qui remuent un peu l'eau, car elles nous permettent de définir les tailles de manière plus flexible (comme celles que nous utilisons dans l'exemple ci-dessus), mais même dans ce cas, nous avons toujours un contrôle total sur leur flexibilité, et tout cela est contrôlé par le parent, sans avoir besoin de définir certaines propriétés pour le parent, et certaines pour les enfants.
Modifications limitées
Si nous regardons l'exemple Flexbox, nous ne pouvons pas le faire ressembler à la disposition ci-dessous sans changer le balisage HTML:
Nous nous sommes limités à la façon dont nous avons regroupé les éléments à l'aide d'un
<div> . Nous avons dû utiliser ces
<div> pour faire fonctionner la mise en page, mais maintenant c'est devenu un obstacle pour nous.
Avec les enfants de notre conteneur de grille situés au même niveau, vous pouvez tout faire . Et comme bonus supplémentaire, puisque nous avons tout configuré à l'aide de
grid-template-areas , effectuer ces changements est très facile.
.card { grid-template-areas: "image name" "image position" "image social" ". description"; }
En jouant avec
grid-template-areas de cette manière, vous pouvez déplacer rapidement et facilement les icônes des réseaux sociaux là où nous voulons les voir (le point dans la dernière partie indique une cellule vide).
Cela facilite la vie lorsque vous travaillez avec des requêtes multimédias.
Comme je l'ai mentionné plusieurs fois, c'est le cas lorsque l'utilisation de
grid-template-areas garantie. Nous pouvons contrôler entièrement notre mise en page uniquement en utilisant les propriétés du parent:
.card { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "name" "image" "social" "position" "description"; } .profile-name { grid-area: name;} .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } .profile-name::after { margin-left: 0; } }
CodePen ci-dessous contient un exemple entièrement stylisé. Vous pouvez l'étudier, jouer avec les zones de la grille et voir à quel point il est facile de reconstruire complètement la disposition.
Flexbox a toujours sa propre portée
J'utilise de plus en plus Grid, mais je pense que Flexbox a toujours sa propre portée. Si j'ai un logo et une navigation situés les uns à côté des autres, ce serait bien d'avoir un moyen facile de faire quelque chose comme ça et de savoir qu'ils seront là où je veux qu'ils soient:
.header { display: flex; justify-content: space-between; }
Il en va de même pour le
<ul> que nous utilisons pour la navigation, juste pour que les éléments se suivent, ou, comme vous pouvez le voir dans l'exemple avec la carte que nous avons examinée, il est idéal pour
.social-list .
Pour les composants simples où nous n'avons pas besoin d'une mise en page compliquée, cela fonctionne vraiment bien. Mais de plus en plus, je constate un mouvement vers Grid, parfois à cause de leur besoin évident, parfois parce que je veux utiliser la fonction
minmax() ou les unités de mesure
fr .
Mais à la fin, je pense que la meilleure chose à propos de Grid est la possibilité de simplifier considérablement notre balisage.
Nous sommes toujours obligés d'utiliser le
<div> , mais grâce à la Grille, nous pouvons les utiliser de moins en moins.
En conclusion
Peu importe la qualité de Flexbox, ce n'est pas plus simple que Grid. Cela fonctionne vraiment bien dans certaines situations, mais lorsque vous travaillez avec des dispositions plus complexes, la grille nous permet d'avoir beaucoup plus de contrôle. Ce contrôle est amélioré lors de l'utilisation d'une conception réactive lors de la modification des requêtes multimédias.
Lorsque vous utilisez Flexbox, le plus grand changement que nous pouvons faire est la
flex-direction . En utilisant une grille, nous pouvons changer rapidement et simplement complètement la conception d'un composant.
Flexbox et Grid ont beaucoup plus de fonctionnalités. Chacun a son but, mais si vous sentez que vous ne savez pas quelle approche adopter, ou que vous êtes coincé à essayer de comprendre le design réactif en général, j'ai récemment annoncé un cours à Scrimba qui aborde le design réactif appelé le responsive Web Design Bootcamp.