Apprendre la Grille CSS

[Source et lien de référence](http://jensimmons.com/post/feb-27-2017/learn-css-grid "Permalink to Learn CSS Grid | Jen Simmons")

Apprendre la Grille CSS | Jen Simmons | 27 février 2017

Les gens commencent à demander : où puis-je en apprendre davantage sur la Grille CSS ?

Il y a plein de ressources fantastiques en ligne. Quand il s'agit de technique, la plupart de ce qui existe a été écrit par [Rachel Andrew][1]. Si vous ne connaissez pas son travail, prenez le temps de la connaître et de la suivre [2]...

Aussi, voici les liens vers les ressources que je recommande et je continuerai à mettre à jour cette liste :

• Rachel a construit un site web plein d’exemples, cette promenade vous emmènera sur ce que peut faire la Grille : [gridbyexample.com/examples][3]
• Elle a aussi créé une série de tutoriels vidéos gratuits qui présentent la Grille : [gridbyexample.com/video][4]
• Elle a démarré une galerie de mises en page communes que vous pourriez utiliser : [gridbyexample.com/patterns][5]
• Rachel a aussi assemblé un cours bien léché sur tout le CSS que vous devez connaître pour coder vos mises en page à la main : <https://thecssworkshop.com> il est décomposé en deux parties et vous pouvez acheter l’accès à la Partie 1 et à la partie 2 (qui inclut la Grille), ou les deux. (Si vous pouvez le permettre, payer l’accès à ces vidéos est un moyen génial de supporter tout le travail que Rachel fournit gratuitement. En outre, vous comblerez toutes vos lacunes dans vos connaissances générales de la mise en page. Je l’ai suivi bien sûr. Il y avait tout un tas de choses que je ne connaissais pas, et je ne savais pas que je ne le savais pas.)
• Ou apprendre en regardant une conférence parmi ses conférences (ou les huit) longue durée : [trouver la plus récente] [6].
• Et comme toujours, MDN dispose d'une documentation technique détaillée sur tout ce que vous voulez savoir [sur la Grille CSS][7] y compris un [guide des concepts de base]bien écrit][8]. Comment avons-nous rassemblé un ensemble de documents d'experts aussi complets ? Nous avons embauché Rachel pour les écrire.
• Assurez-vous d'essayer l'[Outil Inspecteur de Grille][9] intégré dans Firefox. Il est très difficile de coder une disposition de grille sans pouvoir voir vos lignes. Mes collègues de Mozilla et moi-même avons pour objectif de vous fournir un outil qui facilite le développement et la conception des mises en page de grille dans le navigateur. De nombreuses autres fonctionnalités ont été planifiées et apparaîtront au cours de l'année prochaine. [Contactez-moi][10] avec des idées, des demandes, des commentaires sur la façon dont l'outil fonctionne pour vous. Une telle rétroaction -louange et critique- aide énormément à trouver des ressources pour faire avancer les choses au niveau suivant.
• Et pour finir il y a les trois années de travaux que j’ai produites, à commencer par conférence en 2015 sur le design de mise en page : [Modern Layouts: Getting Out Of Our Ruts][11]
• Ma conférence 2016 sur le design de mise en page [Revolutionize Your Page: Real Art Direction on the Web][12]
• Ma conférence sur l’utilisation de CSS à ce jour, même quand tous les navigateurs ne le supportent pas : [Progressing Our Layouts][13]
• Et mes démos sur : [labs.jensimmons.com][14]
• Comment nous utiliserons la Grille CSS, même si elle n’est pas supporté par 100% des navigateur ? En [Utilisant les Feature Queries dans CSS][15].
• Pour vraiment comprendre les layouts CSS? vous devriez apprendre aussi les [Modes d’Ecriture CSS][16]
• Chen Hui Jing a écrit un article fantastique sur les modes d’écritures : avec une [démo fascinante][17], et [une conférence][18].
• Jing a produit une seconde démo fascinante de [Mode d’Ecriture][19] et écrit un très bel [article à ce propos.][20] Je ne pense pas qu’il utilise la Grille CSS, mais il montre le type de pensée que nous utiliserons dans le futur.
• Tant que vous y êtes, suivez aussi Jing sur Twitter : [@hj_chen][21]
• Rachel aussi produit une anti-sèche pour les trucs que vous devrez chercher le plus souvent : [Box Alignment Cheatsheet][22]
• Pour beaucoup de gens, la première question concernant Grid est : pourquoi j’utiliserais la Grille au lieu de Flexbox ? Rachel a répondu ici : [Should I use Grid or Flexbox?][23]
• Elle a aussi répondu à la question importante sur IE — dans ce cas : [Should we try to use the old IE 10 & 11 implementation of Grid?][24]
• En fait, il y avait tellement de personnes qui interrogeaient Rachel, qu’elle a paramètre un repo GitHub comme un AMA. Aussi allez-y et demandez-lui plus de trucs / et trouvez plus de réponses : [CSS Grid Ask Me Anything][25]
• Belén Albeza a écrit un article pertinent sur les choses que vous devriez étudier au moment de décider comment architecturer votre projet, [Vous pourriez ne pas avoir besoin de framework CSS][26]
• Vous voulez un moyen rapide pour commencer à jouer dès maintenant avec la Grille CSS, sans avoir à chercher un endroit pour écrire du code ? Essayez le [CSS Grid Playground][27]

Il y aura plein de choses à venir ici de la part de Rachel, Jing et moi cette année.

Je commence à voir un tas d'introductions simples, de faux-récits putes-à-clics, et d'idées étrangement fausses qui se glissent dans la conversation sur la Grille CSS. Elles ne sont pas si utiles. Ils ont souvent tort. Partageons s'il vous plaît le meilleur travail les uns avec les autres - pas exclusivement le travail effectué par les hommes parce qu'il semble plus respectable / plus autoritaire / plus génial ! Et surtout, ne faisons pas circuler le travail publié par des gens qui ont tout simplement copié le travail de Rachel, mal, avec des erreurs. En 2017, je n'ai plus de patience pour ces manigances. Jusqu'à présent, la plupart des gens que j'ai vus apprendre, enseigner et évangéliser CSS Grid sont des femmes. Si soudainement nous "disparaissons" et qu'un groupe d'hommes attire toute l'attention, ma tête pourrait exploser.

Si vous voyez de nouvelles ressources qui sont _good_, faites le moi savoir! Je veux présenter ici le travail le plus utile. Une fois que vous commencez à apprendre la Grille CSS, partagez ce que vous avez découvert. Expliquez les choses d'une nouvelle manière qui vous semble utile. Faire des démos contrairement à tout ce que nous avons vu auparavant. Créditez les sources qui vous ont enseigné et inspiré. Référencez la plus grande conversation. Il y a beaucoup à apprendre. Beaucoup à découvrir. Beaucoup à inventer. C'est vraiment une révolution dans le design graphique sur le web. Il n'y a pas de temps, pas de raison de se débattre pour le même territoire ennuyeux, en essayant de rendre invisibles les personnes - les femmes - qui y sont arrivées.

[1]: https://rachelandrew.co.uk [2]: https://twitter.com/rachelandrew [3]: http://gridbyexample.com/examples/ [4]: http://gridbyexample.com/video/ [5]: http://gridbyexample.com/patterns/ [6]: https://www.google.com/#q=rachel+andrew&tbm=vid&* [7]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout [8]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout [9]: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts [10]: http://jensimmons.com/contact [11]: http://jensimmons.com/presentation/modern-layouts-getting-out-our-ruts [12]: http://jensimmons.com/presentation/revolutionize-your-page-real-art-direction-web [13]: http://jensimmons.com/presentation/progressing-our-layouts [14]: http://labs.jensimmons.com [15]: https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/ [16]: https://24ways.org/2016/css-writing-modes/ [17]: https://www.chenhuijing.com/zh-type/ [18]: https://youtu.be/tTV60oAk6Cs?t=1m52s [19]: http://penang-hokkien.gitlab.io [20]: https://www.chenhuijing.com/blog/the-one-about-home/#=_ [21]: https://twitter.com/hj_chen [22]: https://rachelandrew.co.uk/css/cheatsheets/box-alignment [23]: https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ [24]: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/ [25]: https://github.com/rachelandrew/cssgrid-ama [26]: https://hacks.mozilla.org/2016/04/you-might-not-need-a-css-framework/ [27]: https://www.cssgridplayground.com