Blog
CSS Grid ou Flexbox : les deux bien sûr !

Partager

C’est bientôt Noël ! Fort heureusement vous n’aurez pas attendre jusque là pour profiter des possibilités que peut offrir les cadeaux que mère CSS a déjà mis à notre disposition.

Vous l’aurez compris aujourd’hui nous allons parler CSS (aka Cascading Style Sheets) et plus spécifiquement de mise en page (layout en anglais) pour disposer votre contenu. Dans ce domaine de nombreuses techniques ont vu le jour comme tables, floats, positioning ou encore inline-block.

Cependant la complexification constante des designs et des mises en page demandés a rendu la tâche de plus en plus difficile pour les développeurs Front-end et les intégrateurs, notamment lorsqu’il s’agit de l'imbrication de plusieurs composants en multi-colonnes et/ou multilignes. Cette sophistication a été pour beaucoup source de frustration, à la vue du ratio temps passé/réalisation qui s’allonge et à la complexité grandissante due aux multiples appareils mobiles (smartphone et tablettes).

Fort de ce constat, de nouveaux outils ont émergé. Nous allons nous pencher sur deux d’entre-eux :

  • - Le module des boîtes flexibles (Flexible Box), aussi appelé « Flexbox »
  • - Le module CSS Grid layout (modèle de disposition en grille)

En aucune façon, cet article ne se prétend comme un tutoriel, ni une tentative de donner un avis tranché sur ces deux outils. Il vise à alimenter notre réflexion et peut-être éviter l’écueil d’utiliser un outil par simple habitude ou parce qu’il est à la « mode ».

Flexbox

Flexbox est un modèle de disposition unidimensionnelle. C’est-à-dire qu’il peut gérer une seule dimension à la fois : soit en colonne soit en ligne. Ce modèle va permettre de distribuer l'espace entre des objets d'une interface ainsi que de les aligner.

La dimension Flexbox

Flexible container et Flex items

Le conteneur flexible ou Flexible container va être la zone où sont englobés les éléments que l’on va vouloir disposer à notre convenance. Pour créer un conteneur flexible, il faut que la valeur de la propriété display de cet élément soit flex ou inline-flex. Dès que c'est le cas, les éléments « enfants » directs deviennent des éléments flexibles (flex items).

Un 'flex-container' et des 'flex-item' fonctionnent ensemble, le container parent donne des règles de format et les items enfants les respectent.

Les deux axes de Flexbox

L’un des concepts fondamentaux pour comprendre Flexbox est ou plutôt sont : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est défini par la propriété flex-direction et l'axe secondaire est l'axe qui lui est perpendiculaire avec align-items. La manipulation des éléments de notre conteneur va donc se faire de façon linéaire en fonction de ces deux axes.

Exemple 1 : (flex-direction : row)

Flex-direction : row Flexbox-direction en HTML Flexbox-direction en CSS

Exemple 2 : (flex-direction : column)

Flex-direction : column Flex-direction en CSS

CSS Grid layout

Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet la manipulation d'éléments dans une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface.

Contrairement à Flexbox, la grille n'a pas de structure de contenu. Les éléments « enfants » d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés. Vous pouvez ainsi définir le layout de votre page et le réorganiser entièrement pour l’adapter à différentes tailles d’écrans, et tout cela avec juste quelques lignes de CSS. Grid est un des modules CSS les plus puissants jamais proposés car il permet une disposition à deux dimensions.

Voyons un exemple simple :

Schema de grid Grid en HTML Grid en CSS

Tout de suite, on remarque que la grande force de CSS-Grid va résider dans sa maintenabilité et sa flexibilité. A l’image de la librairie React pour le Javascript, le framework CSS-Grid va être le héraut du déclaratif. Je déclare un certain découpage dans mon container et je dis comment mon item enfant doit se comporter et s’afficher au sein du parent.

Un exemple avec l'utilisation de grid-template-area et grid-area

Comme le container avec Flexbox, Le container parent CSS-Grid va contenir les éléments à ordonner et sera le point de départ d’utilisation de Grid. Pour définir ce conteneur il suffit de lui attribuer la propriété CSS display: grid. A partir de là, on peut commencer à ordonner nos éléments.

Il faut savoir qu’il y a plusieurs façon d’ordonner nos éléments qui ont chacune ses défauts et qualités en fonction de la situation. Aussi ai-je choisi de vous montrer l’une d’entre elle avec l’utilisation de grid-template-area(côté container) et grid-area (côté item enfant) mais on peut aussi utiliser une autre approche comme grid-templates-columns/grid-templates-rows(côté container) et grid-column/grid-row (côté item enfant) par exemple.

Reprenons l’exemple précédent:

Explication Grid-area

Avec grid-template-areas on ne se préoccupe pas de la taille de nos colonnes ou de lignes mais plutôt de l’agencement/ répartition des espaces que l’on désire au sein de ce container.
Et pour plus de lisibilité pourquoi pas nommer ces espaces? Prenons l’exemple de content : on comprend ici que cet espace sera réparti à la fois sur 2e ligne / 2e colonne et également sur la 2e ligne / 3e colonne.
Une grande flexibilité et modularité nous sont données afin de déclarer simplement la disposition voulue et facilite un design responsive plus simple à maintenir.

Avec grid-area, on peut maintenant très facilement attribuer un des espace configuré au sein du template de notre container.
Ici je veux que l’élément HTML avec la classe ".content" se place à l’endroit du template où le mot “content” apparaît.

En conclusion

Les deux outils sont tous les deux pertinents s’ils sont utilisés à bon escient en fonction de l’environnement et du but à atteindre. La question de l’efficience versus la notion d’efficacité prend tout son sens ici.

Récapitulons quelques éléments pour vous aider dans cette décision :

  1. La disposition/mise en page (ou layout en anglais) CSS avec Grid est un système à deux dimensions : il peut gérer en même temps la disposition des colonnes et des lignes. Ce qui n’est pas le cas avec l’utilisation de Flexbox qui lui est fondamentalement un système à une dimension : soit en colonne soit en ligne mais pas les deux à la fois.
  2. D’autre part choisir l’un ou l’autre c’est choisir une approche. Opter pour CSS-Grid, c’est choisir la disposition de nos différents blocs (ou layout-first). Si on choisit l’approche Flexbox, on opte pour la disposition de notre contenu (content-first).
  3. Flexbox est le plus approprié pour la disposition des éléments au sein des composants d’une application car ses derniers suivent la plupart du temps une certaine linéarité. CSS-Grid quant à lui se destine à la disposition d’une mise en page à plus grande échelle des composants eux-mêmes présents dans la page.
  4. Mais alors si les cas d’utilisations semblent différents, on peut se poser la question suivante : peut-on les combiner ? La réponse est oui. Par exemple, on peut facilement incorporer un composant Flexbox (disposition des éléments d’une navbar) au sein même d’un composant CSS-Grid (voir image ci-dessous). On notera que le contraire n’est pas possible.
  5. Schema Flexbox-grid Flexbox-grid en CSS Flexbox-grid en HTML
  6. Cerise sur le gâteau, les deux spécifications sont plutôt bien prises en charge et supportées par l’ensemble des navigateurs modernes si on se réfère au site Can I use :
Prise en charge par les navigateurs Prise en charge par les navigateurs

comments powered by Disqus