L’arrivée imminente de Grid Layout dans nos navigateurs préférés et la démocratisation de Flexbox laisse présager de belles choses dans nos designs web.
Pour la peine, je me suis penché de près sur les spécifications CSS « alignement », destinées à gérer les alignements et distributions de chaque modèle de positionnement (bloc / inline, flexbox, grid, multi-colonnes, etc.).
Le modèle de positionnement de Grid Layout est notamment basé sur ces spécifications d’alignement CSS3.
L’on y retrouve des propriétés et valeurs que l’on côtoie habituellement avec Flexbox (que je connais un petit peu) et on se sent donc très vite à l’aise : justify-content, align-items, flex-start, flex-end, etc.
Mais en y regardant de plus près, force est de constater que ces règles et propriétés ne sont pas tout à fait les mêmes entre les spécifications…
Plus j’avance dans la découverte du modèle d’alignement, plus je sens que cela va être un véritable casse-tête de le faire cohabiter avec Flexbox.
Je me suis donc fait un petit pense-bête pour essayer de m’en sortir. Voyez vous-même comme c’est perturbant…
1) Alignement des éléments sur l’axe principal
Dans Grid Layout (basé sur CSS alignement) :
- Propriété : justify-items
- Valeur par défaut : auto
- Valeurs possibles : center | start | end | self-start | self-end | flex-start | flex-end (oui oui, flex-start et flex-end dans Grid Layout) | left | right | baseline | last-baseline | space-between | space-around | space-evenly | stretch
Dans Flexbox Layout :
- Propriété : justify-content
- Valeur par défaut : flex-start
- Valeurs possibles : flex-start | flex-end | center | space-between | space-around
1 bis) Alignement des éléments sur l’axe secondaire
Dans Grid Layout :
- Propriété : align-items
- Valeur par défaut : auto
- Valeurs possibles : center | start | end | self-start | self-end | flex-start | flex-end (oui oui, toujours flex-start et flex-end) | left | right | baseline | last-baseline | space-between | space-around | space-evenly | stretch
Dans Flexbox Layout :
- Propriété : align-items
- Valeur par défaut : stretch
- Valeurs possibles : flex-start | flex-end | center | baseline | stretch
2) Alignement d’un élément particulier sur l’axe principal
Dans Grid Layout :
- Propriété : justify-self
- Valeur par défaut : auto
- Valeurs possibles : center | start | end | self-start | self-end | flex-start | flex-end | left | right | baseline | last-baseline | space-between | space-around | space-evenly | stretch
Dans Flexbox Layout :
- Propriété : pas de propriété pour cela (bah non)
2 bis) Alignement d’un élément particulier sur l’axe secondaire
Dans Grid Layout :
- Propriété : align-self
- Valeur par défaut : auto
- Valeurs possibles : center | start | end | self-start | self-end | flex-start | flex-end | left | right | baseline | last-baseline | space-between | space-around | space-evenly | stretch
Dans Flexbox Layout :
- Propriété : align-self (oui, align-self existe dans Flexbox mais pas justify-self…)
- Valeur par défaut : auto
- Valeurs possibles : flex-start | flex-end | center | baseline | stretch
3) Alignement d’un ensemble d’éléments sur l’axe principal
Dans Grid Layout :
- Propriété : justify-content (oups, comme le justify-content de flexbox pas pas pareil)
- Valeur par défaut : normal
- Valeurs possibles : center | start | end | self-start | self-end | flex-start | flex-end | left | right | baseline | last-baseline | space-between | space-around | space-evenly | stretch
Dans Flexbox Layout :
- Propriété : pas de propriété pour cela (oui parce que le justify-content de flexbox aligne les items, pas les ensembles)
3 bis) Alignement d’un ensemble d’éléments sur l’axe secondaire
Dans Grid Layout :
- Propriété : align-content
- Valeur par défaut : normal
- Valeurs possibles : center | start | end | self-start | self-end | flex-start | flex-end | left | right | baseline | last-baseline | space-between | space-around | space-evenly | stretch
Dans Flexbox Layout :
- Propriété : align-content (alignement de plusieurs lignes, … uniquement si flex-wrap est activé)
- Valeur par défaut : stretch
- Valeurs possibles : lex-start | flex-end | center | space-between | space-around | stretch
Moi je vous le dis : on n’a pas fini de s’emmêler les pinceaux !
La Tête dans le Flux 
Si même toi Raphael, tu t’emmeles les pinceaux, que devrions nous dire, nous autres « petits » integrateurs…. 😀
En effet, tu as bien mérité une …
Bière… j’avais mis un br mais passe pas…
Hello.
En fait, ce que je crois, c’est surtout que Flexbox est plus complexe que Grid. Mais, si on prends les propriétés unes à unes, dans Grid, ça semble plutôt simple:
justify-content / align-content : alignent la grille (les éléments virtuels constituants les cellules)
justify-items / align-items : alignent les éléments au sein de chaque cellule
justify-self / align-self : alignent un élément au sein d’une cellule
Salut Vincent. Tu as raison, mais pour le coup je n’aurais pas dit que Flexbox est plus complexe mais plutôt plus bordélique et illogique 🙂
Oui, mais c’est quand même plus « facile » et moins « lourd » que de se coltiner du JS du type « masonry » ! Merci pour l’article !
Je viens à peine de m’habituer à Flexbox!
Mais apparemment Grid semble englober les spécifications de flexbox en étant plus cartésien. Si je comprends bien, à termes, on utilisera Grid layout au détriment de flexbox layout, et on gardera flexbox pour arranger les éléments à l’intérieur d’une div?
Ce qui est con, c’est que flexbox s’est super vite implémenté et à quand même résolu la majeure partie des casse-têtes de positionnement. Faudrait que le W3C attende que Grid Layout soit bien mature pour le lancer, histoire qu’on évite les errements du premier flexbox…
Bon ben en allant voir la spec, on voit l’intention principale de la Grid-layout:
Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. https://www.w3.org/TR/css-grid-1/#intro
Pour ma part, je vois Grid Layout comme un squelette de page, un peu à l’image de ce qu’on peut trouver dans la presse papier.
Dès que possible je pense le tester en combinaison avec flexbox, en me servant donc de grid layout pour structurer ma page, et flexbox pour structurer les différents modules de cette page.
Du haut de votre expérience, est-ce une bonne façon de penser grid layout ?
Oui, c’est exactement pour cela que Grid et Flexbox ont été conçus 🙂