Utiliser Grid ou Flexbox ?

Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout.

Par

Dans ma récente présentation à Fluent Conf, j’ai montré les caractéristiques communes et les différences existant entre Flexbox et CSS Grid Layout. Actuellement, nous ne pouvons utiliser CSS Grid Layout qu’en activant les fonctionnalités expérimentales des navigateurs, cependant lorsque Grid sera supporté, on pourra parfois s’interroger pour savoir lequel utiliser, de Grid ou de Flexbox. Voici quelques réflexions sur le sujet.

Layout principal vs éléments d’interface utilisateur

Quand on découvre CSS Grid Layout, on pense en général qu’il permet de contrôler les grandes division d’une mise en page et fournit un cadre pour les headers, sidebars, contenu principal et footers.

See the Pen Grid Named Areas with header and footer by rachelandrew (@rachelandrew) on CodePen.

Vous pouvez en voir un cas d’usage dans cet exemple. Seul l’enfant direct devient un item grid et donc en déclarant une grille (grid) sur mon conteneur, le header, le side bar, le contenu principal et le footer deviennent tous les items grid que nous pouvons placer sur la grille. Tout élément situé à l’intérieur de ces conteneurs principaux peut ensuite être disposé en utilisant n’importe quelle méthode.

Flexbox n’est pas aussi bien adapté à la création de tels layouts. Il est certainement possible de créer une mise en page simple avec Flexbox comme celle que nous venons de voir. Cependant une fois que le wrap (retour à la ligne) entre en action, chaque rangée (ou chaque colonne si l’on travaille avec flex-direction: column) devient un container flex lui-même. La distribution de l’espace se fait le long de cette rangée ou de cette colonne et vous perdez la possibilité d’aligner les objets avec les items des rangées supérieures.

Nous voyons ici la principale différence entre Flexbox et Grid. Flexbox est conçu fondamentalement pour disposer des items dans une dimension unique — sur une rangée OU sur une colonne. Grid est conçu pour disposer des items dans deux dimensions — rangées ET colonnes.

Uni-dimensionnel vs bi-dimensionnel

Voici l’exemple le plus simple possible de layouts à une et deux dimensions (cliquez sur “Edit on CodePen” pour une version pleine largeur)

See the Pen Flex and Grid demo by rachelandrew (@rachelandrew) on CodePen.

Dans la mise en page du haut, j’utilise Flexbox pour afficher un ensemble de “cartes”. La propriété flex-wrap du container est réglée sur “wrap” (pas de débordement) et donc les items flex se trouvent sur deux lignes. J’ai par ailleurs réglé flex-grow sur 1, flex-shrink sur 1 et flex-basis sur 200px. Donc ma largeur de boîte idéale est de 200px, mais les items peuvent s’agrandir ou se rétrécir.

Si mon écran est étroit et n’affiche que trois boîtes sur la première rangée, les deux autres passent en-dessous. Comme flex-grow est réglé sur 1, cela signifie que l’espace résiduel après que la valeur de flex-basis a été retirée est partagé à égalité entre ces boîtes ( NdT : si flex-basis vous donne des maux de tête, consultez l’article Layout sur 12 colonnes). La première rangée compte trois boîtes qui sont moins larges que les boîtes de la deuxième rangée qui ne compte que deux boîtes.

Flexbox fonctionne comme ça. Cependant, la plupart des problèmes liés à Flexbox que l’on me soumet sont dus au fait que les développeurs essaient de l’utiliser pour des layouts en deux dimensions. C’est ici que vous auriez besoin de Grid layout.

Dans la version Grid, nous définissons la grille sur l’élément conteneur, les items grid se placent juste sur les cellules déjà définies. Donc un item peut s’aligner avec un autre sur sa rangée mais aussi avec un autre sur sa colonne.Si nous voulons qu’un item s’étende sur deux colonnes ou deux rangées, nous ciblons cet item d’une façon ou d’une autre.

Travailler à partir du contenu vs travailler depuis la définition de la grille

Ce que nous pouvons constater dans les exemples qui précèdent c’est que lorsque nous utilisons Grid Layout, nous déclarons notre grille et le contenu de tout grid item doit ensuite s’adapter à l’espace dans lequel il est placé.

Si vous avez beaucoup d’items, et si vous n’avez pas besoin de les aligner avec d’autres éléments, bref si vous voulez juste qu’ils soient affichés de manière égale et flexible, alors c’est Flexbox qu’il vous faut. Le plus basique des exemples montre le comportement des items lorsqu’ils ont une quantité égale d’espace autour d’eux via la propriété justify-content: space-between.

See the Pen xVjvmb by Pierre Choffe (@pierrechoffe) on CodePen.

CSS Grid implémente la distribution de l’espace et les propriétés d’alignement qui font partie du module Box Alignment, ce qui donne des possibilités de jouer avec l’alignement et l’espacement des items grid jusqu’à un certain point, mais le fait est qu’en raison de l’approche bi-dimensionnelle de Grid, on ne peut pas faire en sorte qu’une rangée de la grille se comporte différemment de la rangée du dessus. Si vous le voulez, il vous faudra modifier les propriétés des items grid individuels, par exemple en les faisant s’étendre sur plus de cellules ou en utilisant des valeurs différentes d’alignement.

Bref, c’est à vous de choisir. Est-ce que vous voulez laisser à votre contenu le soin de contrôler la façon dont il est affiché, rangée par rangée ou colonne par colonne ? C’est Flexbox.

Sinon, voulez-vous définir une grille et permettre aux items de se placer automatiquement dans les cellules définies par cette grille, ou bien contrôler leur positionnement en utilisant les lignes ou les zones de template ? C’est Grid.

Si vous voulez voir de nombreux exemples de grilles, jetez un coup d’oeil à ma collection sur Grid by Example.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur CSS-Grid parus dans la Cascade.

Articles sur les mêmes thèmes dans la Cascade :

CSS Grid Layout, guide complet, par Chris House
CSS Grid et le Saint Graal, par Ire Aderinokun


Ressources complémentaires

Grid by Example, de Rachel Andrew, comme son nom l’indique c’est une page proposant de nombreux exemples de mises en page avec Grid Layout. Les exemples utilisent CodePen donc on a toutes les infos à disposition.


Article original paru le 30 mars 2016 sur le site Rachel Andrew.

Sur l’auteur : est la fondatrice et la directrice de la société de développement web edgeofmyseat.com. La société se concentre actuellement sur son CMS Perch. Elle donne de nombreuses conférences, dont on peut trouver la liste et les ressources associées sur cette page. Elle est également l’auteur de plusieurs ouvrages et articles, elle a notamment publié dernièrement Get Ready for CSS Grid Layout chez A Book Apart et co-écrit avec Jeremy Keith la nouvelle version de HTML5 for Web Designers chez le même éditeur. On peut la suivre sur son site, sur Twitter et sur Google+ et lire sa newsletter hebdomadaire csslayout.news très intéressante.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Rachel Andrew © 2016.