CSS Grid generator

CSS Grid Generator : un générateur de CSS Grid

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 ! 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 Please may I have some code, et CSS Grid Generator vous fournit le code que vous n’avez plus qu’à copier coller dans votre fichier CSS.

CSS Grid generator exemple

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

 

Laisser un commentaire :

Votre adresse email ne sera pas publiée.