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
Tweet

More Decks by Jessica Lyschik

Other Decks in Technology

Transcript

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

    View Slide

  2. Why you should use
    CSS Grid today

    View Slide

  3. Source: caniuse.com

    View Slide

  4. Creating 2-dimensional layouts natively in CSS
    Modified example of gridbyexamples.com

    View Slide

  5. CSS Grid is not like
    Bootstrap or 960grid

    View Slide

  6. Don’t think in columns, think in line numbers, starting at 1 from the very left.
    Modified example of gridbyexamples.com

    View Slide

  7. Example 1: CodePen

    View Slide

  8. Example 2: CodePen

    View Slide

  9. Thank you!
    Questions?
    Follow me on Twitter:
    @jessicalyschik

    View Slide