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
Search
Mary Baum
March 17, 2018
Design
0
220
Momma's CSS Grid
CSS-Grid presentation, WordCamp Miami 2018
Mary Baum
March 17, 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
400
My favorite design tool ... is a browser.
marybaum
0
45
Let's Get Visual!
marybaum
0
190
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
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
プロダクトデザインの「守破離」の「破」について
hayashirine
0
310
最速[要出典]アクセシビリティチェック
magi1125
2
200
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
太田博三(@usagisan2020)
otanet
0
220
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Done Done
chrislema
182
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
How to train your dragon (web standard)
notwaldorf
90
5.8k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Designing for Performance
lara
604
68k
Being A Developer After 40
akosma
89
590k
Fireside Chat
paigeccino
34
3.2k
How to Ace a Technical Interview
jacobian
276
23k
A better future with KSS
kneath
238
17k
KATA
mclloyd
29
14k
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
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