Cet article a 5 ans. Il commence à dater mais n'est pas forcément obsolète. Lisez-le en gardant son âge en tête ! Merci.
Article invité par Stéphanie Walter
UX Designer et experte mobile, je porte une attention toute particulière à l’expérience utilisateur et fais partie des personnes qui voient le CSS comme un outil de design. Formations, cours à l’université, conférences et articles de blog dans différentes langues, j'aime partager mon savoir sous différentes formes.
Il y a 2 ans (ha ouai…) j’ai écrit un petit article ici : Apprendre le positionnement en s’amusant – Partie 1 : Flexbox. Ca fait un moment que je voulais écrire la deuxième partie sur Grid Layout mais je n’ai jamais vraiment pris le temps de le faire. J’ai parlé de Grid Layout pour la première fois il y a 6 ans (ha ouai x2 !) dans mon article sur The State Of Responsive Web Design 2013.
Cette spécification a attiré mon attention dès le début. Mais elle n’était à l’époque pas tout à fait prête.
Beaucoup de choses ont changé depuis 2013 et maintenant la Grid Layout est suporté est pris en charge dans la plupart des navigateurs principaux. Créditons les personnes qui ont fait avancer la spec : nous devons beaucoup à Rachel Andrew et à Jen Simmons !!!! Grid Layout est un ensemble de propriétés CSS qui vous permettra de spécifier une grille pour votre site (avec des lignes et des colonnes) et de placer votre contenu sur cette grille. Plutôt cool, non ?
La syntaxe peut être un peu complexe à apprendre si vous êtes habitués aux bons vieux flottants. Dans cet article je vous propose une liste de sites, tutoriels et bacs à sable pour apprendre de manière ludique à maîtriser tout ce que vous devez savoir sur Grid Layout. Amusez-vous bien !
English: This blog post is a french translation of this english version wrote by Stéphanie.
Dans ce jeu, vous devrez utiliser des propriétés Grid Layout pour arroser et prendre soin de votre jardin. Chaque niveau du jeu est accompagné de quelques explications sur les différentes propriétés que vous pouvez utiliser pour terminer le niveau.
Ce site vous propose un jeu complet pour 139$ composé de différents niveaux et leçons pour devenir un expert en grille CSS. Le design semble assez fabuleux. J’aurais cependant bien aimé qu’il y ait un premier niveau « gratuit » pour pouvoir tester le jeu.
Vous pouvez tout apprendre sur Flexbox et Grid Layout, si vous ne pouvez pas sélectionner ce dont vous avez besoin dans la page, ça ne va pas vous aider. CSS Dinner est un jeu de 32 niveaux qui vous permettra d’apprendre à utiliser les sélecteurs CSS. Vous avez faim ?
Réalisé par @flukeout
Parfois, la meilleure façon d’apprendre est de jouer avec le code et les propriétés directement dans le navigateur. Ces outils visuels vous permettront de construire et de jouer avec les grilles pour vous aider à maîtriser les spécifications.
Quelle meilleure façon d’apprendre que de jeter un coup d’œil directement au code ? Ce site (créé et maintenu par Rachel Andrew) est une belle collection d’exemples avec leur explication pour créer différentes mises en page avec Grid Layout.
Un terrain de jeu coloré qui vous permet de jouer avec une grille déjà construite et de tester les différentes propriétés.
Créé par @alialaaa.
Un outil conçu par Sarah Edo pour vous aider à créer et construire votre propre système de grille.
Un autre outil pour vous aider à créer des modèles de grille dans le navigateur. Celui-ci support également les régions.
Créé par Jacob Pratt
Une bonne introduction mais aussi une excellente anti sèche avec toutes les propriétés Grid Layout en un seul endroit sur CSS Tricks.
Un outil visuel bien pratique qui vous permettra également de copier/coller des propriétés lorsque vous cliquez dessus.
Créé par Malven Co.
Pourquoi ne pas utiliser CSS pour créer le plan de votre maison ? Une démo cool par Olivia Ng
Dans cette vidéo très ludique, Jenn Lukas vous montre comment définir des colonnes et des lignes avec Grid Layout en 60 seconds chrono.
Ceci est une playlist de la chaîne Youtube « Layout Land » où Jen Simmons vous expliquera les bases de Grid Layout.
25 vidéos créées par Wes Bos avec le support de Firefox pour vous aider à apprendre la mise en page CSS Grid Layout.
Si vous recherchez des ressources plus traditionnelles, vous pouvez jeter un coup d’œil ici :
Partager la publication "Apprendre le positionnement en s’amusant – Partie 2 : Grid Layout"
Laisser un commentaire sur cet article ?
Suivre les commentaires et trackbacks