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
200
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
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
240
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
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
200
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
990
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
680
maki setoguchi
maki_setoguchi
0
620
Findyのプロデチームの 歩みとこれから
satty9556
0
370
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1M
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
200
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
180
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
130
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
0
180
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
270
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
290
Featured
See All Featured
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
97
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.1k
New Earth Scene 8
popppiees
0
1.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Optimizing for Happiness
mojombo
379
70k
A Soul's Torment
seathinner
2
2.1k
How Software Deployment tools have changed in the past 20 years
geshan
0
31k
Tell your own story through comics
letsgokoyo
0
770
Test your architecture with Archunit
thirion
1
2.1k
WCS-LA-2024
lcolladotor
0
400
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.8k
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