The document discusses the evolution of web design, highlighting the transition from table and float layouts to CSS Grid Layout, which was proposed by Microsoft in 2011. It distinguishes between Flexbox and Grid, noting that Flexbox is suitable for one-dimensional layouts while Grid is better for two-dimensional designs. The document also references various resources for learning and implementing CSS Grid effectively.

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/