Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Momma's CSS Grid
Search
Mary Baum
March 17, 2018
Design
0
240
Momma's CSS Grid
CSS-Grid presentation, WordCamp Miami 2018
Mary Baum
March 17, 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
65
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
230
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
200
Other Decks in Design
See All in Design
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
2.9k
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
1k
デザインを信じていますか
sekiguchiy
1
730
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
270
Goodpatch Tour💙 / We are hiring!
goodpatch
31
990k
デザインするために「多様性」について考える
iflection
0
110
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
1
430
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
530
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
700
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.4k
root COMPANY DECK / We are hiring!
root_recruit
1
25k
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
260
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Code Reviewing Like a Champion
maltzj
527
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Discover your Explorer Soul
emna__ayadi
2
1k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
45
New Earth Scene 8
popppiees
0
1.2k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.1k
Visualization
eitanlees
150
16k
Speed Design
sergeychernyshev
33
1.4k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
580
So, you think you're a good person
axbom
PRO
0
1.8k
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