Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Momma's got a brand-new grid, in Albuquerque.
Search
Mary Baum
January 20, 2018
Design
150
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Momma's got a brand-new grid, in Albuquerque.
Mary Baum
January 20, 2018
Transcript
50 slides
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
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
46
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
85
Let's get visual!
marybaum
0
440
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
430
My favorite design tool ... is a browser.
marybaum
0
75
Let's Get Visual!
marybaum
0
280
Themes_101.pdf
marybaum
0
290
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
220
Other Decks in Design
See All in Design
凡庸を落とすハーネス
hiromimaeo
2
1.1k
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
ayumidesign
0
320
【2026】ポートフォリオ_大坪明日香
tsubo52
0
170
ひとりで作れる時代に、判断をみんなで持つには
kgsi
1
170
From Desktop to Spatial Interfaces UX Design Implications of Evolving Interaction Paradigms
hcrane
0
150
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
530
Bet AI Day 2026丨デザインハーネス:専門職の判断基準をコードのように運用する
layerx
PRO
6
7.9k
東京都市大学 都市生活学部×一般社団法人オープン企画イベント 「誰もがデザイナーである」とはどういうことか? 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
170
HeartLanguage - DesignProcess
heartlanguage
0
860
PLATEAUで白い街を作る
aikautau
0
250
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
210
いいUIとは?初心者向けに事例をもとにUIデザインを分解
yuichi_hara7
13
7.4k
Featured
See All Featured
Are puppies a ranking factor?
jonoalderson
2
4.2k
RailsConf 2023
tenderlove
30
1.6k
AI: The stuff that nobody shows you
jnunemaker
PRO
12
1.3k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
3k
How to Ace a Technical Interview
jacobian
280
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.2k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
350
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
1
610
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
2
2.1k
[SF Ruby Conf 2025] Rails X
palkan
3
1.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
56
3.5k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.8k