Pro Yearly is on sale from $80 to $50! »

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!

25329b7e3ef73310bfab649a0e17b0a2?s=128

Jessica Lyschik

September 14, 2019
Tweet

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