{"id":6811,"date":"2019-07-21T15:50:33","date_gmt":"2019-07-21T13:50:33","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6811"},"modified":"2019-07-21T16:13:37","modified_gmt":"2019-07-21T14:13:37","slug":"apprendre-le-positionnement-en-samusant-partie-2-grid-layout","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/apprendre-le-positionnement-en-samusant-partie-2-grid-layout","title":{"rendered":"Apprendre le positionnement en s\u2019amusant \u2013 Partie 2 : Grid Layout"},"content":{"rendered":"

Il y a 2 ans (ha ouai\u2026) j’ai \u00e9crit un petit article ici : Apprendre le positionnement en s\u2019amusant \u2013 Partie 1 : Flexbox<\/a>. Ca fait un moment que je voulais \u00e9crire la deuxi\u00e8me partie sur Grid Layout mais je n’ai jamais vraiment pris le temps de le faire. J’ai parl\u00e9 de Grid Layout pour la premi\u00e8re fois il y a 6 ans (ha ouai x2 !) dans mon article sur The State Of Responsive Web Design 2013<\/a>.<\/p>\n

<\/p>\n

Cette sp\u00e9cification a attir\u00e9 mon attention d\u00e8s le d\u00e9but. Mais elle n’\u00e9tait \u00e0 l\u2019\u00e9poque pas tout \u00e0 fait pr\u00eate.
\nBeaucoup de choses ont chang\u00e9 depuis 2013 et maintenant la Grid Layout est suport\u00e9 est pris en charge dans la plupart des navigateurs principaux<\/a>. Cr\u00e9ditons les personnes qui ont fait avancer la spec\u00a0: nous devons beaucoup \u00e0 Rachel Andrew<\/a> et \u00e0 \u00a0Jen Simmons<\/a> !!!! Grid Layout est un ensemble de propri\u00e9t\u00e9s CSS qui vous permettra de sp\u00e9cifier une grille pour votre site (avec des lignes et des colonnes) et de placer votre contenu sur cette grille. Plut\u00f4t cool, non ?
\nLa syntaxe peut \u00eatre un peu complexe \u00e0 apprendre si vous \u00eates habitu\u00e9s aux bons vieux flottants. Dans cet article je vous propose une liste de sites, tutoriels et bacs \u00e0 sable pour apprendre de mani\u00e8re ludique \u00e0 ma\u00eetriser tout ce que vous devez savoir sur Grid Layout. Amusez-vous bien !<\/p>\n

English: <\/strong>This blog post is a french translation of this english version<\/a> wrote by St\u00e9phanie.<\/p>\n

Des petits jeux pour apprendre\u00a0CSS Grid Layout<\/h2>\n

Grid Garden<\/a><\/h3>\n

Dans ce jeu, vous devrez utiliser des propri\u00e9t\u00e9s Grid Layout<\/span> pour arroser et prendre soin de votre jardin. Chaque niveau du jeu est accompagn\u00e9 de quelques explications sur les diff\u00e9rentes propri\u00e9t\u00e9s que vous pouvez utiliser pour terminer le niveau.<\/p>\n

\"\"<\/p>\n

Grid Critters<\/a><\/h3>\n

Ce site vous propose un jeu complet pour 139$ compos\u00e9 de diff\u00e9rents niveaux et le\u00e7ons pour devenir un expert en grille CSS. Le design semble assez fabuleux. J\u2019aurais cependant bien aim\u00e9 qu’il y ait un premier niveau \u00ab\u00a0gratuit\u00a0\u00bb pour pouvoir tester le jeu.<\/p>\n

\"\"<\/p>\n

Bonus \u2013 CSS Diner<\/a><\/h3>\n

Vous pouvez tout apprendre sur Flexbox<\/span> et Grid Layout<\/span>, si vous ne pouvez pas s\u00e9lectionner ce dont vous avez besoin dans la page, \u00e7a ne va pas vous aider. CSS Dinner<\/span> est un jeu de 32 niveaux qui vous permettra d\u2019apprendre \u00e0 utiliser les s\u00e9lecteurs CSS. Vous avez faim ?
\nR\u00e9alis\u00e9 par @flukeout<\/a><\/p>\n

\"\"<\/p>\n

G\u00e9n\u00e9rateurs visuels et bacs \u00e0 sable pour CSS Grid Layout<\/span><\/h2>\n

Parfois, la meilleure fa\u00e7on d’apprendre est de jouer avec le code et les propri\u00e9t\u00e9s directement dans le navigateur. Ces outils visuels vous permettront de construire et de jouer avec les grilles pour vous aider \u00e0 ma\u00eetriser les sp\u00e9cifications.<\/p>\n

Grid by example<\/a><\/h3>\n

Quelle meilleure fa\u00e7on d’apprendre que de jeter un coup d’\u0153il directement au code ? Ce site (cr\u00e9\u00e9 et maintenu par Rachel Andrew<\/a>) est une belle collection d’exemples avec leur explication pour cr\u00e9er diff\u00e9rentes mises en page avec Grid Layout<\/span>.<\/p>\n

\"\"<\/p>\n

Grid Visual Playground<\/a><\/h3>\n

Un terrain de jeu color\u00e9 qui vous permet de jouer avec une grille d\u00e9j\u00e0 construite et de tester les diff\u00e9rentes propri\u00e9t\u00e9s.
\nCr\u00e9\u00e9 par @alialaaa<\/a>.<\/p>\n

\"\"<\/p>\n

CSS Grid Generator<\/a><\/h3>\n

Un outil con\u00e7u par Sarah Edo<\/a> pour vous aider \u00e0 cr\u00e9er et construire votre propre syst\u00e8me de grille.<\/p>\n

\"\"<\/p>\n

CSS Grid Layout Generator<\/a><\/h3>\n

Un autre outil pour vous aider \u00e0 cr\u00e9er des mod\u00e8les de grille dans le navigateur. Celui-ci support \u00e9galement les r\u00e9gions.
\nCr\u00e9\u00e9 par Jacob Pratt<\/a><\/p>\n

\"\"<\/p>\n

Les \u00ab\u00a0anti-s\u00e8ches\u00a0\u00bb Grid +Layout<\/h2>\n

CSS Tricks\u2019 A Complete Guide to Grid<\/a><\/h3>\n

Une bonne introduction mais aussi une excellente anti s\u00e8che avec toutes les propri\u00e9t\u00e9s Grid Layout<\/span> en un seul endroit sur CSS Tricks<\/a>.<\/p>\n

\"\"<\/p>\n

GRILLE : une antis\u00e8che visuelle pour Grid Layout<\/a><\/h3>\n

Un outil visuel bien pratique qui vous permettra \u00e9galement de copier\/coller des propri\u00e9t\u00e9s lorsque vous cliquez dessus.
\nCr\u00e9\u00e9 par Malven Co.<\/a><\/p>\n

\"\"<\/p>\n

Des d\u00e9mos amusantes<\/h2>\n

CSS Grid Floor Plan<\/a><\/h3>\n

Pourquoi ne pas utiliser CSS pour cr\u00e9er le plan de votre maison ? Une d\u00e9mo cool par Olivia Ng<\/a><\/p>\n

\"\"<\/p>\n

Montrez-moi des vid\u00e9os !<\/h2>\n

Video \u2013 How to use CSS grid layout in 60 seconds!<\/a><\/h3>\n

Dans cette vid\u00e9o tr\u00e8s ludique, Jenn Lukas<\/a> vous montre comment d\u00e9finir des colonnes et des lignes avec Grid Layout<\/span> en 60 seconds chrono.<\/p>\n

\"\"<\/p>\n

Layout Land \u2013 la play list CSS Grid<\/a><\/h3>\n

Ceci est une playlist de la cha\u00eene Youtube \u00ab Layout Land<\/span> \u00bb o\u00f9 Jen Simmons<\/a> vous expliquera les bases de Grid Layout<\/span>.<\/p>\n

\"\"<\/p>\n

cssgrid.io<\/a><\/h3>\n

25 vid\u00e9os cr\u00e9\u00e9es par Wes Bos<\/a> avec le support de Firefox pour vous aider \u00e0 apprendre la mise en page CSS Grid Layout<\/span>.<\/p>\n

\"\"<\/p>\n

Plus de ressources<\/h2>\n

Si vous recherchez des ressources plus traditionnelles, vous pouvez jeter un coup d\u2019\u0153il ici\u00a0:<\/p>\n