Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Grid in the wild

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!

Jessica Lyschik

September 14, 2019

More Decks by Jessica Lyschik

Other Decks in Technology


  1. CSS Grid in the wild Jessica Lyschik • WordCamp Zürich

  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