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
170
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
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
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
370
太田博三(@usagisan2020)
otanet
0
200
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
590
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
550
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.9k
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
530
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
270
Design System for training program
mct
0
300
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
Night Shift (beginning sequence)
cpineda57
0
920
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Music & Morning Musume
bryan
46
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Faster Mobile Websites
deanohume
305
30k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Automating Front-end Workflow
addyosmani
1366
200k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
The Pragmatic Product Professional
lauravandoore
32
6.3k
Optimising Largest Contentful Paint
csswizardry
33
3k
Building Applications with DynamoDB
mza
91
6.1k
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