Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Momma's CSS Grid, updated again!
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Mary Baum
May 13, 2018
Design
210
0
Share
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
36
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
69
Let's get visual!
marybaum
0
430
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
420
My favorite design tool ... is a browser.
marybaum
0
56
Let's Get Visual!
marybaum
0
250
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
210
Other Decks in Design
See All in Design
つくり方を変えていく | change-how-we-build
mottox2
2
1.2k
I.A. como meio, não como fim. Dados + IA e até onde vai a promessa?
videlvequio
0
280
Drawing for Animation
lynteo
2
290
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
600
はじめての演奏会フライヤーデザイン
chorkaichan
1
290
富山デザイン勉強会_デザイントレンド2026.pdf
keita_yoshikawa
3
180
Figma MCPを活用するためのデザインハンドブック
vivion
7
17k
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
13k
TUNAG BOOK 2024
stmn
PRO
0
1.5k
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
hiro93n
1
220
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
540
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2.3k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4k
Amusing Abliteration
ianozsvald
1
160
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
490
Thoughts on Productivity
jonyablonski
76
5.1k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
280
First, design no harm
axbom
PRO
2
1.2k
Speed Design
sergeychernyshev
33
1.6k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
190
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Designing for Performance
lara
611
70k
HDC tutorial
michielstock
2
650
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.4k
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