Momma's CSS Grid

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