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
210
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
27
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
54
Let's get visual!
marybaum
0
380
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
390
My favorite design tool ... is a browser.
marybaum
0
45
Let's Get Visual!
marybaum
0
180
Themes_101.pdf
marybaum
0
250
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
190
Other Decks in Design
See All in Design
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
7.1k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
190
太田博三(@usagisan2020)
otanet
0
200
How to go from research data to insights?
mastervicedesign
0
180
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
170
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.8k
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
470
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
330
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
450
Yahoo Newsletter Clicker Template
xuechunwu
0
300
Rayout Pattern 01
one0
0
370
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A designer walks into a library…
pauljervisheath
204
24k
Typedesign – Prime Four
hannesfritz
40
2.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
96
Why Our Code Smells
bkeepers
PRO
335
57k
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