Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Momma's CSS Grid
Search
Mary Baum
March 17, 2018
Design
240
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Momma's CSS Grid
CSS-Grid presentation, WordCamp Miami 2018
Mary Baum
March 17, 2018
Transcript
73 slides
CSS-Grid.
None
None
None
None
None
None
None
None
None
None
None
None
New unit! The fraction. 1fr, 2fr, 3fr, more.
Now let’s pay some dues.
We’re here for two reasons.
Jen Simmons . http://labs.jensimmons.com/
Rachel Andrew http://rachelandrew.co.uk
Jen Simmons. Host/executive producer, The Web Ahead. 2015 Net
Award: Podcast of the Year. http://labs.jensimmons.com/
Jen Simmons. Designer/Developer Advocate at Mozilla. What do we need
next in design for the web? http://labs.jensimmons.com/
None
Rachel Andrew. Editor-in-chief, Smashing Magazine. http://rachelandrew.co.uk/
Rachel Andrew. Web developer, speaker, author. http://rachelandrew.co.uk/
Rachel Andrew. Cofounder, Perch CMS. http://rachelandrew.co.uk/
None
So. Grid.
What is it? Where do we use it? Does it
work with Flexbox? How do we get started?
What it’s not.
What it’s not: A plugin A framework A page-builder A
panacea (much)
Grid is a CSS specification.
Where do we use it?
Grids of posts.
instead of Flexbox; instead of floats; instead of block and
inline- block;
Instead of Flexbox.
None
None
None
Instead of floats.
None
Thanks, Foundation. You taught me some great php.
None
How about inside a post?
None
None
None
Breakpoints are a lie. (Kinda.)
None
None
None
None
None
Why, yes! You can mix units.
None
None
Does it work with Flexbox?
None
None
None
Browser support?
None
The implicit grid.
None
None
None
None
The browser adapts the grid to the elements you put
in it.
VWs.
The vw unit. Viewport-width.
None
None
None
None
Mary Baum @marybaum
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
46
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
85
Let's get visual!
marybaum
0
440
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
430
My favorite design tool ... is a browser.
marybaum
0
75
Let's Get Visual!
marybaum
0
280
Themes_101.pdf
marybaum
0
290
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
220
Other Decks in Design
See All in Design
[Unity] VAT×VFX Graphがいま個人的にアツイという話
sakiyama
0
150
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
kgsi
14
23k
明日から真似できる、AIでデザインシステムを活用する方法
vivion
0
1k
設計の進め方と 品質特性品質特性
harakeishi
0
1.5k
Webブラウザで動く VJツールをつくる
akirafukuoka
0
140
【CEDEC2026】派手さと見やすさは両立できる!『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
cygames
PRO
2
2.5k
Bet AI Day 2026丨デザインハーネス:専門職の判断基準をコードのように運用する
layerx
PRO
6
7.9k
作品が生まれ続けるコミュニティデザイン ― 研究室でも会社でもないサードプレイス ― / designship26-iwaken
iwaken71
0
230
分裂するデザイン、取り残される空間—インクルーシブデザインスタジオが建築をやる理由
culumu
0
190
Jun Wei Portfolio 2026
wjw100788
PRO
1
460
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
4
5.7k
1000人規模の組織でデザインハーネスを導入するための第一歩
pkshadeck
PRO
5
4.5k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
10k
How to Think Like a Performance Engineer
csswizardry
28
2.9k
Color Theory Basics | Prateek | Gurzu
gurzu
1
520
Mobile First: as difficult as doing things right
swwweet
225
10k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
520
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
570
How to Ace a Technical Interview
jacobian
280
24k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
60k
Scaling GitHub
holman
464
140k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.7k
A Tale of Four Properties
chriscoyier
163
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.4k