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
200
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
390
My favorite design tool ... is a browser.
marybaum
0
45
Let's Get Visual!
marybaum
0
170
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
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
4.3k
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
340
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
660
Design System for training program
mct
0
280
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
330
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
250
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
140
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.8k
Featured
See All Featured
Unsuck your backbone
ammeep
668
57k
Visualization
eitanlees
145
15k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
For a Future-Friendly Web
brad_frost
175
9.4k
What's in a price? How to price your products and services
michaelherold
243
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
400
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Happy Clients
brianwarren
98
6.7k
Facilitating Awesome Meetings
lara
50
6.1k
A Tale of Four Properties
chriscoyier
156
23k
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