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
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
890
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
1
410
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.9k
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
AI情報に溺れながら、それでも頑張って泳ぐための思考法
Avatar for Iori67 yoriss67
0
130
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
290
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
300
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
850
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
150
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
200
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
500

Featured

See All Featured
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
49
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
210
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
240
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k

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