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
220
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Momma's CSS Grid, updated again!
A little more depth on breakpoints and why they're a convenient fiction.
Mary Baum
May 13, 2018
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
43
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
76
Let's get visual!
marybaum
0
440
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
420
My favorite design tool ... is a browser.
marybaum
0
67
Let's Get Visual!
marybaum
0
260
Themes_101.pdf
marybaum
0
280
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
210
Other Decks in Design
See All in Design
「バイブコーディングって何?」から始まった、 AIとの一年間と、その先のこと
seto
0
1.1k
設計と制作 意図を形に表す / Design and Making: Intent Made Form
usagimaru
3
2.1k
「親切なオンボーディング」 が招く罠 ー AI時代のUXデザイン
godlingkogami
1
150
【CEDEC2026】派手さと見やすさは両立できる!『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
cygames
PRO
0
1.3k
凡庸を落とすハーネス
hiromimaeo
1
760
つくり方を変えていく | change-how-we-build
mottox2
2
1.4k
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
500
CULTURE DECK/Frontend Engineer
mhand01
0
1.5k
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
2
3.3k
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
560
言幹と言葉(Stems & Leaves)
kakukoki
0
180
エンジニアがAI活用してスライドデザインできる世界が来たよ!
kaikou
1
370
Featured
See All Featured
Unsuck your backbone
ammeep
672
58k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
200
Optimizing for Happiness
mojombo
378
71k
How STYLIGHT went responsive
nonsquared
100
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.9k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
230
Rails Girls Zürich Keynote
gr2m
96
14k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
490
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
Raft: Consensus for Rubyists
vanstee
141
7.6k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
390
Leo the Paperboy
mayatellez
8
2.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