Momma's CSS Grid

Ad96ace475ab89952489d5a2454d97da?s=47 Mary Baum
March 17, 2018

Momma's CSS Grid

CSS-Grid presentation, WordCamp Miami 2018

Ad96ace475ab89952489d5a2454d97da?s=128

Mary Baum

March 17, 2018
Tweet

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