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 got a brand-new grid, in Albuquerque.
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Mary Baum
January 20, 2018
Design
2
130
Momma's got a brand-new grid, in Albuquerque.
Mary Baum
January 20, 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
66
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
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
280
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
140
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
3.1k
Drawing for Animation
lynteo
2
190
Storyboard Exercise: Chase Sequence
lynteo
1
200
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
150
root COMPANY DECK / We are hiring!
root_recruit
2
26k
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
3
1.4k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
0
380
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
3
730
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
130
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
520
Featured
See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
110
Designing for Timeless Needs
cassininazir
0
130
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
300
Embracing the Ebb and Flow
colly
88
5k
Evolving SEO for Evolving Search Engines
ryanjones
0
130
Practical Orchestrator
shlominoach
191
11k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
150
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
440
Crafting Experiences
bethany
1
50
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
460
The untapped power of vector embeddings
frankvandijk
1
1.6k
Transcript
Who's your favorite?
None
Style That Site! “I can style it in three breakpoints!”
None
None
None
None
New unit! The fraction. 1fr, 2fr, 3fr, more.
None
None
Now let’s pay some dues.
We’re here for two reasons. Rachel Andrew Jen Simmons
A tiny taste: http:// labs.jensimmons.com/
A tiny taste: http://gridbyexample.com
And so much more.
So. Grid.
What is it? Where do we use it? Does it
work with Flexbox? How to get started?
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
Or along with those things!
Thanks, Foundation. You taught me some great php.
None
How about inside a post? For this theme, I scrapped
the image-gallery plugins.
None
None
None
None
None
None
Why, yes! You can mix units.
None
Does it work with Flexbox?
None
None
None
Browser support?
None
The implicit grid.
None
None
None
Mary Baum @marybaum