Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
230
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
200
Other Decks in Design
See All in Design
Emmy's Artwork
mcksmith
0
180
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
120
Franks Myth
gfht1
0
370
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
330
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
950
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
810
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
240
DESIGNEAST 2025 A-3
_kotobuki_
0
110
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
230
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
1
390
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
0
170
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
230
Featured
See All Featured
Designing for humans not robots
tammielis
254
26k
Practical Orchestrator
shlominoach
190
11k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Unsuck your backbone
ammeep
671
58k
Side Projects
sachag
455
43k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
The World Runs on Bad Software
bkeepers
PRO
72
12k
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