CSS Grid est maintenant utilisable sur tous les navigateurs récents, et même sur certains plus anciens grâce à des prefix. Il est donc temps de s’y mettre étant donné qu’il permet de créer des grilles très facilement, même pour des structures complexes ! Je vous invite d’ailleurs à aller lire cet article qui vous présente différentes ressources pour apprendre à l’utiliser.

Histoire de simplifier encore plus son utilisation, Sarah Drasner nous a développé un générateur de CSS Grid ultra simple d’utilisation : CSS Grid Generator. Cet outil permet de créer une grille en quelques secondes en choisissant le nombre de colonnes et de lignes. Ensuite avec le drag’n’drop vous pouvez également associer des div aux cellules. On peut aussi fixer des hauteurs et largeurs spécifiques.

Une fois votre grille prête, vous cliquez sur Puis-je voir le code, et CSS Grid Generator vous fournit le code que vous n’avez plus qu’à copier coller dans votre fichier CSS.

Et pour les curieux, vous pouvez étudier les sources sur GitHub et même contribuer au projet.