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
0
240

Momma's CSS Grid

CSS-Grid presentation, WordCamp Miami 2018

Avatar for Mary Baum

Mary Baum

March 17, 2018
Tweet

More Decks by Mary Baum

See All by Mary Baum
Genesis or TwentyTwenty?
Avatar for Mary Baum marybaum
0
32
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
Avatar for Mary Baum marybaum
1
65
Let's get visual!
Avatar for Mary Baum marybaum
0
410
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
Avatar for Mary Baum marybaum
1
410
My favorite design tool ... is a browser.
Avatar for Mary Baum marybaum
0
53
Let's Get Visual!
Avatar for Mary Baum marybaum
0
240
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
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
1.8k
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
2.9k
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
600
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
360
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
650
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
670
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
1
2.5k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
280
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
480
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
2
2.4k

Featured

See All Featured
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
210
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
100
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
240
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k

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