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
31
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
62
Let's get visual!
marybaum
0
400
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
51
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
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
550
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
180
TWCP#21 UXデザインと哲学のはなし
shinn
0
110
Vibe Coding デザインシステム
poteboy
3
1.5k
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
110
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
160
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
560
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
220
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
pixyzehn
0
110
Findyのプロデチームの 歩みとこれから
satty9556
0
340
mento Design Team Portfolio
mento0fficial
1
1.1k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
210
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Side Projects
sachag
455
43k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
How GitHub (no longer) Works
holman
315
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
GitHub's CSS Performance
jonrohan
1032
470k
The Language of Interfaces
destraynor
162
25k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
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