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 CSS Grid
Search
Mary Baum
March 17, 2018
Design
240
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Momma's CSS Grid
CSS-Grid presentation, WordCamp Miami 2018
Mary Baum
March 17, 2018
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
45
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
77
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
72
Let's Get Visual!
marybaum
0
270
Themes_101.pdf
marybaum
0
280
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
210
Other Decks in Design
See All in Design
ポートフォリオ_あやの
ngyenmazt1412
0
1.8k
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
kgsi
0
930
Basket_of_love.pdf
terencebasart
0
320
Starfall (2025)
rezaline
0
130
root COMPANY DECK / We are hiring!
root_recruit
4
30k
20260422_Midosuji_Tech
takuyay0ne
2
130
2026-04-06 CMU School of Design "Vision-Driven Design"
ishii_mit
0
170
東京都市大学 都市生活学部×一般社団法人オープン企画イベント 「誰もがデザイナーである」とはどういうことか? 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
130
Jun Wei | Information Design & Presentation Portfolio
wjw100788
PRO
0
120
凡庸を落とすハーネス
hiromimaeo
2
930
1000人規模の組織でデザインハーネスを導入するための第一歩
pkshadeck
PRO
5
4.1k
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
nishame
1
1.5k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
174
15k
4 Signs Your Business is Dying
shpigford
187
23k
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
590
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
250
My Coaching Mixtape
mlcsv
0
320
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
3k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
710
Believing is Seeing
oripsolob
1
220
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
390
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
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
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