Momma's CSS Grid, updated again!

Ad96ace475ab89952489d5a2454d97da?s=47 Mary Baum
May 13, 2018
Design
0
26

Momma's CSS Grid, updated again!

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

Ad96ace475ab89952489d5a2454d97da?s=128

Mary Baum

May 13, 2018
Tweet

Want more?

Ad96ace475ab89952489d5a2454d97da?s=48 marybaum
0
7
Ad96ace475ab89952489d5a2454d97da?s=48 marybaum
1
10
Ad96ace475ab89952489d5a2454d97da?s=48 marybaum
0
94
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
7
330
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
200
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
130
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
250
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
190
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
280
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
3
510
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
140
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
230

Transcript

  1. 1.

    CSS-Grid.

  2. 2.
    None
  3. 3.
    None
  4. 4.
    None
  5. 5.
    None
  6. 6.
    None
  7. 7.
    None
  8. 8.
    None
  9. 9.
    None
  10. 10.
    None
  11. 11.
    None
  12. 12.
    None
  13. 13.
    None
  14. 14.

    New unit! The fraction. 1fr, 2fr, 3fr, more.

  15. 15.

    Now let’s pay some dues.

  16. 16.

    We’re here for two reasons.

  17. 17.

    Jen Simmons . http://labs.jensimmons.com/

  18. 18.

    Rachel Andrew http://rachelandrew.co.uk

  19. 19.

    Jen Simmons. Host/executive producer, 
 The Web Ahead. 2015 Net

    Award: 
 Podcast of the Year. http://labs.jensimmons.com/
  20. 20.

    Jen Simmons. Designer/Developer Advocate at Mozilla. What do we need

    next in design for the web? http://labs.jensimmons.com/
  21. 21.
    None
  22. 22.

    Rachel Andrew. Editor-in-chief, Smashing Magazine. http://rachelandrew.co.uk/

  23. 23.

    Rachel Andrew. Web developer,
 speaker, author. http://rachelandrew.co.uk/

  24. 24.

    Rachel Andrew. Cofounder, 
 Perch CMS. http://rachelandrew.co.uk/

  25. 25.
    None
  26. 26.

    So. Grid.

  27. 27.

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

    work with Flexbox? How do we get started?
  28. 28.

    What it’s not.

  29. 29.

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

    panacea (much)
  30. 30.

    Grid is a CSS specification.

  31. 31.

    Where do we use it?

  32. 32.

    Grids of posts.

  33. 33.

    instead of Flexbox; instead of floats; instead of block and

    inline- block;
  34. 34.

    Instead of Flexbox.

  35. 35.
    None
  36. 36.
    None
  37. 37.
    None
  38. 38.

    Instead of floats.

  39. 39.
    None
  40. 40.

    Thanks, Foundation. You taught me some great php.

  41. 41.
    None
  42. 42.

    How about 
 inside a post?

  43. 43.
    None
  44. 44.
    None
  45. 45.
    None
  46. 46.

    Breakpoints are a lie. (Kinda.)

  47. 47.
    None
  48. 48.

    Really!

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

    Why, yes! 
 You can mix units.

  54. 54.
    None
  55. 55.
    None
  56. 56.

    Does it work with Flexbox?

  57. 57.
    None
  58. 58.
    None
  59. 59.
    None
  60. 60.

    Browser support?

  61. 61.
    None
  62. 62.

    The implicit grid.

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

    The browser adapts the grid to the elements you put

    in it.
  68. 68.

    VWs.

  69. 69.

    The vw unit. Viewport-width.

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

    Mary Baum @marybaum