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
240
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Momma's CSS Grid
CSS-Grid presentation, WordCamp Miami 2018
Mary Baum
March 17, 2018
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
41
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
72
Let's get visual!
marybaum
0
430
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
62
Let's Get Visual!
marybaum
0
250
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
test deck title
shotamatsuo
0
1.5k
AIでデザインをつくる:基礎編
kenichiota0711
4
3.2k
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
220
もう迷わない!“なんとなく”を卒業するフォントの選び方【村田俊英】
toshihidemurata
0
630
Drawing for Animation
lynteo
2
300
Техники структурирования беседы с собой, заказчиком и командо
ashapiro
0
170
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
260
図面資産×AI 眠れる資産を起こす挑戦
aonomasahiro
0
150
20260309_3月ICTデザイン勉強会_地域創生2.0
a2k
0
130
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.9k
Signull 団体説明資料
signull
0
660
社長の宿題への回答 「新卒×AI」が生み出す価値
saki822
2
160
Featured
See All Featured
Ruling the World: When Life Gets Gamed
codingconduct
0
250
A Soul's Torment
seathinner
6
2.9k
Odyssey Design
rkendrick25
PRO
2
700
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
180
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
62
44k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
250
Ethics towards AI in product and experience design
skipperchong
2
310
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.7k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
340
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
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