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
140
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
34
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
420
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
54
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
はじめての演奏会フライヤーデザイン
chorkaichan
1
240
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.2k
CULTURE DECK/Marketing Director
mhand01
0
950
Emmy's Artwork
mcksmith
0
210
Drawing for Animation
lynteo
2
230
デザインするために「多様性」について考える
iflection
0
230
次世代のクリエイティブ体験!Photoshopの最新機能で新しい未来を切り開こう
connecre
0
120
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
2
190
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
1.1k
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
340
Signull 団体説明資料
signull
0
320
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
170
Featured
See All Featured
HDC tutorial
michielstock
1
520
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.1k
It's Worth the Effort
3n
188
29k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
190
AI: The stuff that nobody shows you
jnunemaker
PRO
3
370
What does AI have to do with Human Rights?
axbom
PRO
1
2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.4k
Google's AI Overviews - The New Search
badams
0
930
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
760
Raft: Consensus for Rubyists
vanstee
141
7.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
A Modern Web Designer's Workflow
chriscoyier
698
190k
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