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

CSS Grid

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
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
150
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6k
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
180
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
4
330
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.3k

Featured

See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
91
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
49
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k

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!