$30 off During Our Annual Pro Sale. View Details »
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
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2.4k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
300
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
3
450
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
240
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
120
Emmy's Artwork
mcksmith
0
180
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
830
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
190
kintone Style Book
kintone
5
7.7k
Diverse Design Team Deck
diverse
0
120
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
1
400
体験を守るためのデザイン計測
techtekt
PRO
0
110
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Thoughts on Productivity
jonyablonski
73
5k
The Invisible Side of Design
smashingmag
302
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
A designer walks into a library…
pauljervisheath
210
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Faster Mobile Websites
deanohume
310
31k
How to Ace a Technical Interview
jacobian
280
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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