Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Grid

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Alda Rocha Alda Rocha
March 08, 2017
Programming
1
220

CSS Grid

Palestra do @meetupCSS SP #frontendweek

Avatar for Alda Rocha

Alda Rocha

March 08, 2017
Tweet

More Decks by Alda Rocha

See All by Alda Rocha
Como viés influencia o que desenvolvemos
Avatar for Alda Rocha mjcoffeeholick
3
260
Viés
Avatar for Alda Rocha mjcoffeeholick
3
170
Os clichês de UX
Avatar for Alda Rocha mjcoffeeholick
0
180
Viés e UX
Avatar for Alda Rocha mjcoffeeholick
1
230
UXD: a manopla do infinito do design
Avatar for Alda Rocha mjcoffeeholick
0
140
Raio X de UX
Avatar for Alda Rocha mjcoffeeholick
1
1.3k
UXD: Manopla do infinito do design
Avatar for Alda Rocha mjcoffeeholick
6
360
Qual é a história que seu produto conta?
Avatar for Alda Rocha mjcoffeeholick
3
120
Como ter uma comunidade mais inclusiva
Avatar for Alda Rocha mjcoffeeholick
1
170

Other Decks in Programming

See All in Programming
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
440
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1k
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
650
AI & Enginnering
Avatar for codelynx codelynx
0
110
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
270
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
250
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
2.4k
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
280

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
160
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
97
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
160
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.2M
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k

Transcript

  1. CSS GRID One layout, multiple ways

  2. O que é?

  3. “A spec do CSS Grid Layout é uma das poucas

    novas especificações que estão redefinindo como abordamos layout para a web. Junto com Flexbox e Box Alignment, ela será parte de um sistema moderno de layout para sites e aplicações web.” - Rachel Andrew

  4. https://rachelandrew.co.uk/archives/2017/03/03/learning-css-grid-layout/

  5. https://rachelandrew.co.uk/ @rachelandrew

  6. None

  7. Arte

  8. None
  9. None

  10. Impresso

  11. None
  12. None
  13. None
  14. None

  15. Vida

  16. None
  17. None
  18. None
  19. None

  20. A internet é uma réplica do mundo real

  21. None
  22. None
  23. None
  24. None
  25. None
  26. None

  27. https://www.amazon.com/New-Media-Art-Taschen-Basic/dp/3822830410

  28. None

  29. https://en.wikipedia.org/wiki/Holy_Grail_(web_design)

  30. None
  31. None

  32. O físico impacta no virtual!

  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None

  46. https://www.youtube.com/watch?v=16enLRDbOyY @jensimmons

  47. Vantagens

  48. Nos permite criar layouts complexos com facilidade. O CSS que

    precisamos escrever é muito mais simples e fácil de manter.

  49. Não é mais necessário usar float ou propriedades similares ao

    criar layouts complexos. Completa separação entre markup e layout.

  50. O que impacta?

  51. “Vocês estando deixando o CSS muito complexo. Ele deve ser

    simples.” - Bert Bos

  52. https://youtu.be/RNNxggSLGdo

  53. Simplicidade + Flexibilidade Ciclo

  54. Infos

  55. https://css-tricks.com/snippets/css/complete-guide-grid/

  56. https://bocoup.com/blog/css-grid-responsive-and-accessibility

  57. http://meyerweb.com/eric/thoughts/2017/03/07/welcome-to-the-grid/

  58. https://developers.google.com/web/updates/2017/01/css-grid

  59. https://www.sitepoint.com/introducing-the-css-grid-layout/

  60. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

  61. http://jensimmons.com/post/mar-1-2017/wow-grid-has-so-many- properties-do-we-need-them-all

  62. http://labs.jensimmons.com/

  63. http://jensimmons.com/post/feb-27-2017/learn-css-grid

  64. http://labs.jensimmons.com/2016/

  65. http://labs.jensimmons.com/2016/

  66. http://jeffbridgforth.com/css-grid-first-steps/

  67. http://gridbyexample.com/learn/2016/12/01/learning-grid/

  68. https://la-cascade.io/grid-et-flexbox-le-duo-gagnant/

  69. https://tableless.com.br/entendendo-sistemas-de-grid-css-do-zero/

  70. http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/

  71. https://www.w3.org/TR/css3-grid-layout/

  72. Se animou pra usar?

  73. None
  74. None

  75. https://medium.com/nossa-coletividad/regrinhas-b%C3%A1sicas-de- conviv%C3%AAncia-em-meetups-89fde78b41d5#.7oomynmdp

  76. Obrigada

  77. Alda Rocha UX Designer e Web developer @mjcoffeeholick http:/ /mjcoffeeholick.github.io

    Me add!