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

CSS Grid in the wild

Jessica Lyschik
September 14, 2019
Technology
0
220

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

See All by Jessica Lyschik
Performance 101
jessicalyschik
0
6
Performance 1x1
jessicalyschik
0
70
WordPress 5.3 - und Gutenberg!
jessicalyschik
0
120
CSS Grid in freier Wildbahn
jessicalyschik
0
74
Keine Angst vor Gutenberg und WordPress 5.2
jessicalyschik
0
36
Keine Angst vor Gutenberg und WordPress 5.0
jessicalyschik
0
260
Einstieg in CSS Grid
jessicalyschik
1
440
CSS für Anfänger
jessicalyschik
0
77
Frauen in der IT und der WordPress Community
jessicalyschik
0
84

Other Decks in Technology

See All in Technology
F0推定アルゴリズムHarvestは中で何をしているのか
nagiss
2
330
クラウドサイン事業本部 プロダクト組織 紹介資料
bengo4com
0
180
LLM×Cloud Runでオンライン薬局の既存オペレーションを自動化した話
pharma_x_tech
0
620
コツコツととのえるLTの段取り/engineers_lt
nishiuma
4
170
セルフホストランナーとインターネットとの間の転送量を削減している話
defaultcf
0
130
変化する組織の中で運用するフロントエンドエコシステム / Frontend Ecosystem in Organizational Changes
i524
1
770
増え続ける公開アプリケーションへの悪意あるアクセス_多層防御を取り入れるSRE活動_.pdf
yoshiiryo1
0
130
Dive Into The Cutting-edge LINE API Innovations
linedevth
1
330
AWS 初心者が取り組んだセキュリティ強化の2年間とこれから/Two years of security enhancement efforts by AWS beginners and the future
yayoi_dd
0
280
Code Review Challenge: An example of a solution
line_developers
PRO
1
200
2023 CSS
nishiharatsubasa
6
3.4k
サーバーレス技術とDevSecOps: 安全かつ迅速なデプロイメントの新時代
gl_tsukasa
1
560

Featured

See All Featured
Building an army of robots
kneath
300
41k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
36
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
17
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
9
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
20k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
12
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
26
5.5k
Practical Orchestrator
shlominoach
179
9.3k
The Language of Interfaces
destraynor
149
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
26
45k
Designing for Performance
lara
601
66k
Writing Fast Ruby
sferik
615
59k

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