It’s time for an introduction to the future of web layouts. This isn’t just for developers. This is about invigorating the creativity and flexibility of anyone who designs for the web.

1. CSS Grid
Michael Mizner
@miznerism

2. Let’s talk about design
on the web today

5. Creativity is dead.

6. how did we get here?
You may ask yourself,

7. The Beginning

8. Table Layouts

9. Float Layouts

10. Frameworks

12. CSS Grid Layout
• First Public Draft April 2011
• Proposal developed by Microsoft
• Early implementation in IE10
• Spec has moved on. Is now very
different to the IE10 implementation.

13. When can I use it?

14. But… what about Flexbox?

15. Flexbox is for one-dimensional layouts

16. Flexbox trying to be a grid

17. Grid is for two-dimensional layouts

18. Grid working how it should

19. “If you are adding widths
to all your flex items, you
probably need grid.”
- Rachel Andrew

20. Grid is designed to be used
with flexbox, not instead of it

21. CSS Grid in Action

24. CSS Grid is kinda like
Mondrian art

25. References
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• https://gridbyexample.com/examples/
• https://css-tricks.com/snippets/css/complete-guide-grid/
Fun stuff!
• https://cssgridgarden.com/