Hey ! De retour aujourd’hui pour te présenter CSS Grid Layout, le tout nouveau moteur de grille directement intégré au langage CSS qui révolutionne l’intégration et la mise en page des sites Internet.

Comme c’est super puissant et que ça peut te servir pour la réalisation de ton portfolios, je t’explique tout sans plus tarder

Back to the future !

Pour mieux comprendre CSS Grid, un petit retour en arrière s’impose. Si tu as déjà quelques bases en Intégration Web, je ne t’apprendrais rien si je te dis qu’il existe plusieurs moyens de mettre en forme les blocs, ou de construire une grille en HTML/CSS. Les plus vieux se rappelleront des tableaux dans les débuts du web, les autres des blocs positionnés au pixel près, ou plus récemment en float…

Autant de concepts qui répondaient aux besoins de l’époque, mais qui se sont révélés plus très pratiques lorsque les smartphones et les tablettes sont apparus. A partir de là, notre façon de consommer le web a évolué et les supports se sont diversifiés sans que les techniques utilisées en intégration s’adaptent réellement au besoin de flexibilité.

Et puis en 2015, est apparu le module Flexbox qu’avait présenté Vincent. Une première grande révolution pour les intégrateurs, qui facilite notamment l’alignement des éléments entre eux et améliore leur flexibilité, ou plutôt, leur capacité à s’adapter de façon autonome dans la page. Depuis, Flexbox est quasiment devenu la norme, et de nombreux framework CSS renommés, comme Foundation ou encore Bootstrap dont je t’avais parlé, l’ont adopté dans leurs dernières versions.

Mais la meilleure nouvelle dans tout ça c’est que la révolution ne s’est pas arrêté là ! Il y a un peu plus d’un an maintenant, est ENFIN apparu CSS Grid Layout, LE moteur de grille spécialement pensé pour réaliser des sites web flexibles que l’on attendait. Et vous savez quoi ? En un an seulement tous les navigateurs modernes l’ont implémenté dans leurs dernières versions, faisant aujourd’hui de CSS Grid un outil déjà compatible avec 90% du web actuel !

Cool ! Mais alors c’est quoi la différence entre CSSGrid et Flexbox ?

Je te vois venir si tu t’y connais un peu, on peut déjà facilement construire des grilles avec Flexbox comme on le faisait en “float” c’est vrai. Mais si il y a une chose à savoir, c’est qu’en pratique Flexbox est pensé pour la mise en forme du contenu d’une page web comme une liste d’item par exemple, alors que CSS Grid est spécialement pensé pour le template global d’une page. L’idée n’est donc pas d’utiliser l’un ou l’autre mais plutôt d’allier la puissance des deux.

Prenons un exemple pour que ça soit clair, imaginons que tu veuilles aligner des liens dans une liste horizontalement ou verticalement. Pour ça, Flexbox est parfaitement adapté et en trois lignes de code tes éléments seront alignés dans leur conteneur.

Flexbox
Flexbox

Maintenant, si tu souhaites plutôt réaliser un template de page un peu plus poussé, et bien CSS Grid te sera là d’une plus grande utilité que Flexbox. En fait, il faut voir CSS Grid comme un outils qui permet des créer des lignes horizontales et verticales qui se croisent pour former des zones auxquelles tu peux attribuer du contenu. Les blocs HTML d’une page classique vont en fait venir se greffer sur cette sorte de tableau virtuel que tu auras construit.

CSS Grid

Ce qu’il faut donc que tu retiennes c’est que Flexbox est puissant sur un seul axe uniquement ; soit l’axe vertical, soit l’axe horizontal, mais pas les deux en même temps. Et c’est là qu’est la véritable différence entre Flexbox et CSS Grid puisque ce dernier te permet une puissance sur les deux axes en même temps, vertical ET horizontal !

Des ressources pour bien débuter avec CSS Grid

Si tu veux aller plus loin et que tu veux utiliser CSS Grid pour ton portfolio (et au passage épater ton prof de développement web) voilà 3 ressources qui vont t’aider à débuter un projet, comprendre les propriétés et gérer les problèmes de compatibilité.

MDN Web Docs : Les concepts de base des grilles CSS

Première ressource, un guide traduit en français qui explique les concepts à connaître CSS Grid en profondeur avec de nombreux exemples de codes. D’ailleurs si tu ne connais pas encore ce site édité par la fondation Mozilla, je t’invite à le mettre en favoris puisque c’est un des sites de référence pour le développement web ! Tu peux y retrouver des documentations complètes sur le HTML, le CSS, le JS ou encore le WebGL et plein de tutoriels pour apprendre à bien utiliser ces langages.

Voir le site

CSS Grid Garden

Si après avoir lu toute la documentation tu veux tester tes connaissances et qu’en plus tu as la main verte, ce site est fait pour toi ! Il va te permettre de réviser de façon ludique, avec un rendu en live, toutes les propriétés CSS Grid en plantant des carottes ! Si si je te jure ça marche vraiment ! Et il existe aussi la variante pour apprendre Flexbox avec des grenouilles, je te mets les deux liens :D

Voir le site CSS Grid
Voir le site Flexbox

Alsacréation : CSS Grid layout en production ?

Comme vu plus haut, CSS Grid est déjà compatible sur environ 90% du web actuel mais forcément il y a encore et toujours quelques problèmes de compatibilité avec certains vieux navigateurs (à la surprise générale IE 9, 10, 11, les premières versions de Edge ou encore Opéra). Si vraiment tu as besoin de fallback pour ces vieilleries, alors je te conseille cet article qui résume assez bien les problèmes et qui apporte surtout des solutions pour y remédier ;)

Voir le site

Voilà pour cette petite introduction à CSS Grid ! J’espère que ces quelques lignes t’auront au moins intrigué sur cette nouvelle façon de penser l’intégration des pages web et au mieux j’espère qu’il t’aura donné envie de l’utiliser dans tes projet. Je t’y encourage vraiment ;)

CSS Grid, le futur de la mise en page web est déjà là
5 (100%) 3 votes

2 réflexions sur “ CSS Grid, le futur de la mise en page web est déjà là ”

  1. Merci pour ton article, je ne connaissais pas mais c’est trop cool, je file tout de suite lire la doc !
    Juste les images des schémas ne s’affichent pas chez moi, je ne sais pas si c’est normal

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir