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
230
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
30
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
61
Let's get visual!
marybaum
0
390
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
400
My favorite design tool ... is a browser.
marybaum
0
50
Let's Get Visual!
marybaum
0
220
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
decksh object reference
ajstarks
2
1.3k
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
Findyのプロデチームの 歩みとこれから
satty9556
0
260
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
120
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
330
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
240
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
270
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
440
アクセシビリティに取り組むメリット
magi1125
2
250
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
How to Ace a Technical Interview
jacobian
279
23k
Context Engineering - Making Every Token Count
addyosmani
1
30
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Designing Experiences People Love
moore
142
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GitHub's CSS Performance
jonrohan
1032
460k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Faster Mobile Websites
deanohume
309
31k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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