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
140
2
Share
Momma's got a brand-new grid, in Albuquerque.
Mary Baum
January 20, 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
hicard_credential_202601
hicard
0
230
デザインを信じていますか
sekiguchiy
1
1.2k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
780
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
13k
【サイバーエージェント】Creative Switch 会社説明資料
cyberagent_creators
0
6.3k
【優秀賞+特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
shoko_seven11
0
160
decksh object reference
ajstarks
2
1.6k
「親切なオンボーディング」 が招く罠 ー AI時代のUXデザイン
godlingkogami
0
110
AIでデザインをつくる:基礎編
kenichiota0711
4
3k
Spacemarket Brand Guide
spacemarket
2
610
富山デザイン勉強会_デザイントレンド2026.pdf
keita_yoshikawa
3
180
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
360
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
6.1k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.3k
Designing for Performance
lara
611
70k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
61
43k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
23k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Building the Perfect Custom Keyboard
takai
2
750
Embracing the Ebb and Flow
colly
88
5k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
200
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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