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

Momma's got a brand-new grid.

Avatar for Mary Baum Mary Baum
October 14, 2017
Design
0
76

Momma's got a brand-new grid.

A first look at CSS-Grid in WordPress (and the fr measurement unit).

Avatar for Mary Baum

Mary Baum

October 14, 2017
Tweet

More Decks by Mary Baum

See All by Mary Baum
Genesis or TwentyTwenty?
Avatar for Mary Baum marybaum
0
30
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
Avatar for Mary Baum marybaum
1
59
Let's get visual!
Avatar for Mary Baum marybaum
0
390
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
Avatar for Mary Baum marybaum
1
400
My favorite design tool ... is a browser.
Avatar for Mary Baum marybaum
0
48
Let's Get Visual!
Avatar for Mary Baum marybaum
0
210
Themes_101.pdf
Avatar for Mary Baum marybaum
0
270
Gutenberg.pdf
Avatar for Mary Baum marybaum
0
140
Header logos and favicons!
Avatar for Mary Baum marybaum
0
200

Other Decks in Design

See All in Design
「デザイン」を信じるには
Avatar for なつ iflection
0
280
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
Avatar for Gaku Oyanagi gakuoya
1
680
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
Avatar for Andrew Shapiro ashapiro
0
280
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
3.5k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
960
ビジネス成果を最大限に発揮するPORTFOLIO
Avatar for 新井拓海 ataxi1003
0
190
クライアントワークにおける UXリサーチの実践
Avatar for Kozo Taira kozotaira
0
690
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.6k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
Avatar for bebe bebe
0
620
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.5k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
860k
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
130

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
5
240
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
400
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k

Transcript

  1. Psst …

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None

  8. Now let’s pay some dues.

  9. We’re here for two reasons. Jen Simmons Rachel Andrew

  10. A tiny taste: http://labs.jensimmons.com/ http://jensimmons.com/post/ feb-27-2017/learn-css-grid

  11. A tiny taste: http://gridbyexample.com https://gridbyexample.com/video/

  12. And so much more.

  13. So. Grid.

  14. None

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

    work with Flexbox? How to get started?

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

    panacea (much)

  17. Where do we use it?

  18. Subtitle Text

  19. Subtitle Text

  20. Subtitle Text

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

  22. Subtitle Text

  23. Does it work with Flexbox?

  24. Subtitle Text

  25. Subtitle Text

  26. Subtitle Text

  27. Browser support?

  28. Subtitle Text

  29. Mary Baum @marybaum