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

CSS Grid

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Alda Rocha Alda Rocha
March 08, 2017
Programming
220
1

CSS Grid

Palestra do @meetupCSS SP #frontendweek

Avatar for Alda Rocha

Alda Rocha

March 08, 2017

More Decks by Alda Rocha

See All by Alda Rocha
Como viés influencia o que desenvolvemos
Avatar for Alda Rocha mjcoffeeholick
3
270
Viés
Avatar for Alda Rocha mjcoffeeholick
3
180
Os clichês de UX
Avatar for Alda Rocha mjcoffeeholick
0
180
Viés e UX
Avatar for Alda Rocha mjcoffeeholick
1
240
UXD: a manopla do infinito do design
Avatar for Alda Rocha mjcoffeeholick
0
150
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
130
Como ter uma comunidade mais inclusiva
Avatar for Alda Rocha mjcoffeeholick
1
180

Other Decks in Programming

See All in Programming
条件判定に名前、つけてますか？ #phperkaigi #c
Avatar for Hiromi Hishida 77web
2
940
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
1
240
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
Avatar for Sota Makino sotamaki0421
1
340
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
Avatar for Kuniwak orgachem
PRO
8
4.4k
Symfonyの特性(設計思想)を手軽に活かす特性(trait)
Avatar for ICKX ickx
0
120
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
730
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
690
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
5
760
Going Multiplatform with Your Android App (Android Makers 2026)
Avatar for Márton Braun zsmb
1
250
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
Avatar for 武田 憲太郎 kentaroutakeda
5
2.4k
20260315 AWSなんもわからん🥲
Avatar for Chiaki Okamoto chiilog
2
180
LM Linkで(非力な！)ノートPCでローカルLLM
Avatar for 瀬尾佳隆 seosoft
0
360

Featured

See All Featured
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
140
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
410
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
160
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
120
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
27
3.4k

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!