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
70
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
59
Let's Get Visual!
marybaum
0
250
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
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.4k
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
1
640
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
2
850
AI時代に求められるUXデザインのアプローチ
xtone
1
4.6k
Spacemarket Brand Guide
spacemarket
2
790
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
830
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
1
1.5k
20251128_武蔵野美術大学InnovationDay_参加型の未来
a2k
1
130
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
4
1.7k
Storyboard Exercise: Chase Sequence
lynteo
1
310
はじめての演奏会フライヤーデザイン
chorkaichan
1
300
decksh object reference
ajstarks
2
1.6k
Featured
See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
370
Context Engineering - Making Every Token Count
addyosmani
9
920
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Building the Perfect Custom Keyboard
takai
2
780
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
280
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
55k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
340
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
The untapped power of vector embeddings
frankvandijk
2
1.7k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
190
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