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

Momma's CSS Grid, updated again!

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

Momma's CSS Grid, updated again!

A little more depth on breakpoints and why they're a convenient fiction.

Avatar for Mary Baum

Mary Baum

May 13, 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
150
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
デザインするために「多様性」について考える
Avatar for なつ iflection
0
180
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
570
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
320
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
4
680
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
0
1.2k
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
140
第18回サイゼミ
Avatar for LW lw
1
3.3k
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
250
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
140
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
7k

Featured

See All Featured
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
49
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
110
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
340
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k

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. Really!

  49. None
  50. None
  51. None
  52. None

  53. Why, yes! 
 You can mix units.

  54. None
  55. None

  56. Does it work with Flexbox?

  57. None
  58. None
  59. None

  60. Browser support?

  61. None

  62. The implicit grid.

  63. None
  64. None
  65. None
  66. None

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

    in it.

  68. VWs.

  69. The vw unit. Viewport-width.

  70. None
  71. None
  72. None
  73. None

  74. Mary Baum @marybaum