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
230
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
30
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
61
Let's get visual!
marybaum
0
390
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
410
My favorite design tool ... is a browser.
marybaum
0
50
Let's Get Visual!
marybaum
0
220
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
200
Other Decks in Design
See All in Design
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
300
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
450
minpaku-community-scrum-patterns
norinity1103
1
370
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
270
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
400
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
Them Middle School Kids Pitch
stevie_vee
0
140
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.9k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
280
Featured
See All Featured
Docker and Python
trallard
46
3.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Rails Girls Zürich Keynote
gr2m
95
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
A Tale of Four Properties
chriscoyier
160
23k
Faster Mobile Websites
deanohume
309
31k
GraphQLとの向き合い方2022年版
quramy
49
14k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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