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, updated again!
Search
Mary Baum
May 13, 2018
Design
220
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Momma's CSS Grid, updated again!
A little more depth on breakpoints and why they're a convenient fiction.
Mary Baum
May 13, 2018
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
45
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
84
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
73
Let's Get Visual!
marybaum
0
270
Themes_101.pdf
marybaum
0
280
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
210
Other Decks in Design
See All in Design
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
320
デザイナーがいない部署にハーネスを設計する
kenichiota0711
5
5.4k
decksh object reference
ajstarks
2
1.8k
使いたいときだけ使う 「道具のようなアプリケーション」を考える
fumink7
0
300
工房としてのAI ── デザイナー、作家、ビルダー
hiranotomoki
0
530
技術に明るくない人が技術を選ぶために
moco1013
0
150
Basket_of_love.pdf
terencebasart
0
360
このスロップ時代に良きデザインをつくるには? / good-design-in-the-slop-era
kgsi
1
1k
デザなに#1「問いのデザイン」の紹介LT
garyuten
0
150
Edmonton River Slidedeck
edmontonriver
0
430
20260802東京都市大学オープンキャンパス授業
a2k
0
110
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
nishame
1
1.6k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
18k
SEO for Brand Visibility & Recognition
aleyda
0
4.8k
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
palkan
1
750
The Art of Programming - Codeland 2020
erikaheidi
57
14k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
58k
A designer walks into a library…
pauljervisheath
211
25k
Producing Creativity
orderedlist
PRO
348
41k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
730
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
74
43k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.9k
Transcript
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
Really!
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