De ressources pour apprendre CSS Grid

Des ressources pour apprendre CSS Grid

CSS Grid, malgré son vieil âge, vient d’être 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.

CSS grid cheat sheet

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.

CSS Grid Griddy

Griddy.io

Grid Garden

Un petit site pour apprendre en s’amusant.

Grid Garden

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.

Tutoriel : Spring into CSS Grid

Spring Into CSS Grid

Des guides et tutoriels

 

Laisser un commentaire :

Votre adresse email ne sera pas publiée.