Momma's got a brand-new grid.

Version 1.1

Updated with a few more slides that, ahem, should have been in the original.

Transcript

1. Psst …
8. Now let’s pay some dues.
9. We’re here for two reasons. Jen Simmons Rachel Andrew
10. A tiny taste: http://labs.jensimmons.com/ http://jensimmons.com/post/ feb-27-2017/learn-css-grid
11. A tiny taste: http://gridbyexample.com https://gridbyexample.com/video/
12. And so much more.
13. So. Grid.
14. What is it? Where do we use it? Does it work with Flexbox? How to get started?
15. What it’s not: A plugin A framework A page-builder A panacea (much)
16. Where do we use it?
17. Grids of posts ... instead of Flexbox; instead of floats; instead of block and inline- block;
18. Instead of Flexbox.
22. Thanks, Foundation. You taught me some great php.
24. How about inside a post? For this theme only, 
 I scrapped the image-gallery plugins.
31. Why, yes! 
 You can mix units.
33. .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 200px 2fr 20vw 20rem; grid-template-rows: repeat(4, 200px); background-color: #cf0; color: #ff5; } .box { background: #09f; color: #fff; border-radius: 5px; padding: 20px; font: normal 300 3rem/1 montserrat; } .a { border-radius: 200%; grid-column: 1; grid-row: 2; margin: 2.5rem; padding: 2rem 1rem; text-align: center; } .b { grid-column: 4 ; grid-row: 1 / 5; } .c { grid-column: 1 / 3 ; grid-row: 3 / 4 ; } .d { grid-column: 2; grid-row: 2; } .e { grid-column: 3 / 4; grid-row: 3 / 5; } https://codepen.io/marybaum/pen/bodZbe
34. Does it work with Flexbox?
38. Browser support?
40. Mary Baum @marybaum