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
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
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
dmattsun
2
290
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
securecat
1
430
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
ottatto
3
1.7k
エンジニアがAI活用してスライドデザインできる世界が来たよ!
kaikou
1
370
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
500
AI時代に求められるUXデザインのアプローチ
xtone
1
7.8k
「見せる」登壇資料デザインの極意
takanorip
7
1.4k
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
ayumidesign
0
160
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
abokadotyann
4
1k
TOPOSTOPOS
shoheyey
0
110
Accelerating performance improvement based on a software review evaluation matrix
kitanosirokuma
0
280
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
2
4.7k
Featured
See All Featured
How Software Deployment tools have changed in the past 20 years
geshan
1
34k
How to Ace a Technical Interview
jacobian
281
24k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
73
41k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.9k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
200
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
170
VelocityConf: Rendering Performance Case Studies
addyosmani
332
25k
GitHub's CSS Performance
jonrohan
1033
470k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.3k
Odyssey Design
rkendrick25
PRO
2
760
Un-Boring Meetings
codingconduct
0
390
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