Des Ressources Pour Apprendre CSS Grid - Barbu Du Web

CSS Grid, malgré son vieil âge, est maintenant implémenté dans tous les navigateurs récents, enfin ! Plutôt une bonne nouvelle car son système de grille est très puissant, et il devrait remplacer à terme Flexbox sur ce point.

CSS Grid, c’est quoi exactement ?

CSS Grid est un module qui permet de créer des mise en pages sous forme de grille. Pas n’importe quelle grille, des grilles en 2 dimensions : rangée et colonnes. A la différence de Flexbox qui le permet sur la rangée ou la colonne.

CSS Grid est assez comparable aux tableaux. La grosse différence avec les tableaux, c’est que les grid layouts n’ont pas besoin de structure en html (comme <table><tr><td>).

Pour en savoir plus : des guides, des ressources et des tutoriels sur le site des développeurs mozilla (MDN)

Mais est-ce que je peux déjà utiliser CSS Grid dans mes projets ?

Je ne vous conseille pas forcément de vous jeter sur CSS Grid dès aujourd’hui (vous connaissez aussi bien que moi des personnes et entreprises qui ne mettent pas à jour rapidement leur machine). Par contre, je vous conseille déjà de vous y intéresser et d’apprendre à utiliser le grid layout. Il est certain que d’ici la fin de l’année il commencera à être intéressant de l’implanter dans vos sites web.

Quelques outils et guides pour apprendre CSS Grid

CSS Grid Cheat Sheet

CSS Grid Cheat Sheet (aide-mémoire en Français) est un outil en ligne qui va vous aider à tester les différentes options que proposent le module grid layout. Très pratique car il permet de voir le résultat en direct.

Le lien de l’outil : CSS Grid Cheat Sheet

Griddy.io

Toujours pour apprendre, un autre outil en ligne pour créer des structures de grille.

Griddy.io

Grid Garden

Un petit site pour apprendre en s’amusant.

Grid Garden

Spring Into CSS Grid

Un tutoriel plutôt bien fait qui met en avant toute la réflexion à avoir pour mettre en place CSS Grid. Et il y a même un peu de Flexbox dedans.

Spring Into CSS Grid

Des guides et tutoriels

• un tutoriel d’alsacréations mis à jour pour l’occasion
• CSS Grid Layout, guide complet
• un guide complet sur CSS-Tricks (en anglais)
• une étude de cas complète sur l’utilisation concrète de CSS Grid (en anglais)
• les spécifications W3C du module CSS Grid (en anglais)
• CSS Grid par l’exemple : des exemples d’utilisation (en anglais)