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

CSS Grid in freier Wildbahn

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jessica Lyschik Jessica Lyschik
November 10, 2019
Programming
240
0

CSS Grid in freier Wildbahn

Avatar for Jessica Lyschik

Jessica Lyschik

November 10, 2019

More Decks by Jessica Lyschik

See All by Jessica Lyschik
Performance 101
Avatar for Jessica Lyschik jessicalyschik
0
72
Performance 1x1
Avatar for Jessica Lyschik jessicalyschik
0
180
WordPress 5.3 - und Gutenberg!
Avatar for Jessica Lyschik jessicalyschik
0
240
CSS Grid in the wild
Avatar for Jessica Lyschik jessicalyschik
0
450
Keine Angst vor Gutenberg und WordPress 5.2
Avatar for Jessica Lyschik jessicalyschik
0
160
Keine Angst vor Gutenberg und WordPress 5.0
Avatar for Jessica Lyschik jessicalyschik
0
430
Einstieg in CSS Grid
Avatar for Jessica Lyschik jessicalyschik
1
690
CSS für Anfänger
Avatar for Jessica Lyschik jessicalyschik
0
260
Frauen in der IT und der WordPress Community
Avatar for Jessica Lyschik jessicalyschik
0
200

Other Decks in Programming

See All in Programming
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
550
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
Avatar for Tomohisa Takaoka tomohisa
1
850
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
470
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
140
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
240
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
680
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
510
PHP Application における Kubernetes 内 gRPC 通信
Avatar for Shin Ohno ganchiku
0
590
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
Avatar for a-thug athug
1
1.6k
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
Avatar for Kurumi Watabe krm963
0
260
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
230
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
Avatar for 武田 憲太郎 kentaroutakeda
3
690

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Design in an AI World
Avatar for tapps tapps
1
280
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
260
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
460
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
490
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.7k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
119
120k

Transcript

  1. CSS Grid in freier Wildbahn Jessica Lyschik • WordCamp Stuttgart

    2019

  2. Warum du CSS Grid bereits heute einsetzen solltest

  3. Quelle: caniuse.com

  4. Erstelle 2-dimensionale Layouts, direkt mit CSS Angepasstes Beispiel von gridbyexamples.com

  5. CSS Grid ist nicht wie Bootstrap oder 960grid

  6. Denke nicht in Spalten, sondern in Linien-Nummern. Sie starten bei

    1 von ganz links. Angepasstes Beispiel von gridbyexamples.com

  7. Beispiel 1: CodePen

  8. Beispiel 2: CodePen

  9. Vielen Dank! Was ist deine Frage? Folge mir auf Twitter:

    @jessicalyschik