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
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
20
6.7k
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
440
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
6
1.9k
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
250
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
3
280
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.5k
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
200
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
170

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
66
36k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
55
Designing for Performance
Avatar for Lara Hogan lara
610
70k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
110
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.9k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k

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!