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
77

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
61
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
50
Let's Get Visual!
Avatar for Mary Baum marybaum
0
220
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 kkaru kkaru
0
550
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
190
What makes a great Director?
Avatar for _Limex_ _limex_
0
210
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
580
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
260
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
160
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.3k
8_8_リサーチカンファレンスプレイベント.pdf
Avatar for Muture muture
PRO
2
330
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
120
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
580
企画を動かすデザイナーの思考！「広げて絞る」アプローチ。
Avatar for Hikida Kan hikidakan
0
160
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
2
1.1k

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
187
55k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
6k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
279
23k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k

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