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

Momma's CSS Grid

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Mary Baum Mary Baum
March 17, 2018
Design
240
0

Momma's CSS Grid

CSS-Grid presentation, WordCamp Miami 2018

Avatar for Mary Baum

Mary Baum

March 17, 2018

More Decks by Mary Baum

See All by Mary Baum
Genesis or TwentyTwenty?
Avatar for Mary Baum marybaum
0
44
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
Avatar for Mary Baum marybaum
1
76
Let's get visual!
Avatar for Mary Baum marybaum
0
440
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
Avatar for Mary Baum marybaum
1
430
My favorite design tool ... is a browser.
Avatar for Mary Baum marybaum
0
70
Let's Get Visual!
Avatar for Mary Baum marybaum
0
260
Themes_101.pdf
Avatar for Mary Baum marybaum
0
280
Gutenberg.pdf
Avatar for Mary Baum marybaum
0
150
Header logos and favicons!
Avatar for Mary Baum marybaum
0
210

Other Decks in Design

See All in Design
Design dependencies
Avatar for Teba_eleven teba_eleven
0
160
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
1k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
180
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
520
Frontier
Avatar for Renny Wang rwang05
0
200
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
Avatar for Beeworks Marketing Design webnaut
2
240
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.5k
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
280
PLATEAUで白い街を作る
Avatar for aikautau aikautau
0
180
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
270
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
350
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
200

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
960
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
260
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
880
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
460
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
490

Transcript

  1. CSS-Grid.

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None

  14. New unit! The fraction. 1fr, 2fr, 3fr, more.

  15. Now let’s pay some dues.

  16. We’re here for two reasons.

  17. Jen Simmons . http://labs.jensimmons.com/

  18. Rachel Andrew http://rachelandrew.co.uk

  19. Jen Simmons. Host/executive producer, 
 The Web Ahead. 2015 Net

    Award: 
 Podcast of the Year. http://labs.jensimmons.com/

  20. Jen Simmons. Designer/Developer Advocate at Mozilla. What do we need

    next in design for the web? http://labs.jensimmons.com/
  21. None

  22. Rachel Andrew. Editor-in-chief, Smashing Magazine. http://rachelandrew.co.uk/

  23. Rachel Andrew. Web developer,
 speaker, author. http://rachelandrew.co.uk/

  24. Rachel Andrew. Cofounder, 
 Perch CMS. http://rachelandrew.co.uk/

  25. None

  26. So. Grid.

  27. What is it? Where do we use it? Does it

    work with Flexbox? How do we get started?

  28. What it’s not.

  29. What it’s not: A plugin A framework A page-builder A

    panacea (much)

  30. Grid is a CSS specification.

  31. Where do we use it?

  32. Grids of posts.

  33. instead of Flexbox; instead of floats; instead of block and

    inline- block;

  34. Instead of Flexbox.

  35. None
  36. None
  37. None

  38. Instead of floats.

  39. None

  40. Thanks, Foundation. You taught me some great php.

  41. None

  42. How about 
 inside a post?

  43. None
  44. None
  45. None

  46. Breakpoints are a lie. (Kinda.)

  47. None
  48. None
  49. None
  50. None
  51. None

  52. Why, yes! 
 You can mix units.

  53. None
  54. None

  55. Does it work with Flexbox?

  56. None
  57. None
  58. None

  59. Browser support?

  60. None

  61. The implicit grid.

  62. None
  63. None
  64. None
  65. None

  66. The browser adapts the grid to the elements you put

    in it.

  67. VWs.

  68. The vw unit. Viewport-width.

  69. None
  70. None
  71. None
  72. None

  73. Mary Baum @marybaum