CSS Grid in the wild

Since CSS Grid was introduced in modern browsers in 2017, developers finally are able to create complex layouts with less code. CSS Grid works a bit differently than the CSS frameworks developers are used to, so there’s a learning curve to get it. In this talk I want to show some examples how to use CSS Grid on websites, including either support or fallback layouts for Internet Explorer 10 and 11. Because this shouldn’t be an excuse anymore not to use CSS Grid today!

Transcript

1. CSS Grid in the wild Jessica Lyschik • WordCamp Zürich 2019
2. Why you should use CSS Grid today
3. Source: caniuse.com
4. Creating 2-dimensional layouts natively in CSS Modified example of gridbyexamples.com
5. CSS Grid is not like Bootstrap or 960grid
6. Don’t think in columns, think in line numbers, starting at 1 from the very left. Modified example of gridbyexamples.com
7. Example 1: CodePen
8. Example 2: CodePen
9. Thank you! Questions? Follow me on Twitter: @jessicalyschik