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, updated again!
Search
Mary Baum
May 13, 2018
Design
0
110
Momma's CSS Grid, updated again!
A little more depth on breakpoints and why they're a convenient fiction.
Mary Baum
May 13, 2018
Tweet
Share
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
23
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
49
Let's get visual!
marybaum
0
340
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
380
My favorite design tool ... is a browser.
marybaum
0
43
Let's Get Visual!
marybaum
0
170
Themes_101.pdf
marybaum
0
230
Gutenberg.pdf
marybaum
0
120
Header logos and favicons!
marybaum
0
180
Other Decks in Design
See All in Design
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
Ride or Die Animatics
warwatkar
0
140
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
1
110
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
710
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
Product-Writing
aguringo
6
2.8k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
160
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Typedesign – Prime Four
hannesfritz
36
2.1k
Happy Clients
brianwarren
91
6.4k
The Invisible Customer
myddelton
114
12k
Producing Creativity
orderedlist
PRO
336
39k
Faster Mobile Websites
deanohume
297
30k
Become a Pro
speakerdeck
PRO
10
4.5k
Infographics Made Easy
chrislema
237
18k
It's Worth the Effort
3n
180
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Embracing the Ebb and Flow
colly
79
4.1k
KATA
mclloyd
14
12k
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
Really!
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