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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Mary Baum
March 17, 2018
Design
240
0
Share
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
36
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
69
Let's get visual!
marybaum
0
430
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
420
My favorite design tool ... is a browser.
marybaum
0
56
Let's Get Visual!
marybaum
0
250
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協業の本音と実践
satosio
7
3.2k
体験負債を資産に変える組織的アプローチ
hikarutakase
0
1.1k
情報を翻訳する-伝わる可視化3原則とオープンデータ活用-
hjmkth
1
240
hicard_credential_202601
hicard
0
230
Diverse Design Team Deck
diverse
0
1.5k
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
a2k
1
180
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
4
230
TUNAG BOOK 2024
stmn
PRO
0
1.5k
Storyboard Assignment: Storyboard from Comic Strip
lynteo
3
260
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
1
2.6k
AIスライド生成を進化させるMDファイル
kenichiota0711
0
950
絵や写真から学ぶ、要素がもたらす副作用
kspace
0
300
Featured
See All Featured
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
160
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
140
Code Reviewing Like a Champion
maltzj
528
40k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
220
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
210
Information Architects: The Missing Link in Design Systems
soysaucechin
0
910
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
65
55k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
65
54k
How to Ace a Technical Interview
jacobian
281
24k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
SEO for Brand Visibility & Recognition
aleyda
0
4.5k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
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