Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
230
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
300
Viés
Avatar for Alda Rocha mjcoffeeholick
3
190
Os clichês de UX
Avatar for Alda Rocha mjcoffeeholick
0
200
Viés e UX
Avatar for Alda Rocha mjcoffeeholick
1
260
UXD: a manopla do infinito do design
Avatar for Alda Rocha mjcoffeeholick
0
160
Raio X de UX
Avatar for Alda Rocha mjcoffeeholick
1
1.3k
UXD: Manopla do infinito do design
Avatar for Alda Rocha mjcoffeeholick
6
380
Qual é a história que seu produto conta?
Avatar for Alda Rocha mjcoffeeholick
3
150
Como ter uma comunidade mais inclusiva
Avatar for Alda Rocha mjcoffeeholick
1
200

Other Decks in Programming

See All in Programming
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
Avatar for Marco Roth marcoroth
0
210
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
170
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
1
190
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
530
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
360
AI時代のコードレビューは人に向けるな、仕組みに向けろ
Avatar for meijin texmeijin
5
3.6k
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
190
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
370
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2.3k
mrbgem 三角測量 開発
Avatar for ogom ogom
0
240
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
160
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
5
5.1k

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
280
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
880
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
516
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
780
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
400
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
350
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k

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!