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 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
36
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
55
Let's Get Visual!
marybaum
0
240
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
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
6
960
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
330
絵や写真から学ぶ、要素がもたらす副作用
kspace
0
240
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
710
AIスライド生成を進化させるMDファイル
kenichiota0711
0
510
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
490
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
250
Storyboard Exercise: Chase Sequence
lynteo
1
250
2026_01_07_3DプリントはじめましたLT.pdf
hideakitakechi
0
140
体験負債を資産に変える組織的アプローチ
hikarutakase
0
980
kintone_aroma
kintone
0
1.8k
root COMPANY DECK / We are hiring!
root_recruit
2
27k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
348
40k
How to make the Groovebox
asonas
2
2k
Google's AI Overviews - The New Search
badams
0
950
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
460
GraphQLとの向き合い方2022年版
quramy
50
14k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
220
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
How to train your dragon (web standard)
notwaldorf
97
6.6k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
150
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
400
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