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
Mary Baum
May 13, 2018
Design
0
200
Momma's CSS Grid, updated again!
A little more depth on breakpoints and why they're a convenient fiction.
Mary Baum
May 13, 2018
Tweet
Share
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
32
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
65
Let's get visual!
marybaum
0
410
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
410
My favorite design tool ... is a browser.
marybaum
0
53
Let's Get Visual!
marybaum
0
240
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
200
Other Decks in Design
See All in Design
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
300
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.3k
Liquid GlassとApp Intents
touyou
0
800
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
2.7k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
570
デザインするために「多様性」について考える
iflection
0
180
モビリティプラットフォームの未来を築くクラウド基盤
kossykinto
0
200
DMMデザイナーの “AI活用の現在と未来”
takumasaito
1
440
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
140
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
payatsusan213
0
200
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
420
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
120
Featured
See All Featured
WCS-LA-2024
lcolladotor
0
450
Everyday Curiosity
cassininazir
0
130
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
190
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
84
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
The browser strikes back
jonoalderson
0
370
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Marketing to machines
jonoalderson
1
4.6k
Code Reviewing Like a Champion
maltzj
527
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
770
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
3.6k
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