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
28
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
56
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
46
Let's Get Visual!
marybaum
0
200
Themes_101.pdf
marybaum
0
260
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
190
Other Decks in Design
See All in Design
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
310
250131_product meetup
motokoishida
0
170
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
150
Building foundations 堅牢なデザイントークンの設計
hilokifigma
1
3k
Marp + TailWind CSS でスライドをきれいにする
maea2
0
110
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
380
線で考える画面構成
natsuume
1
840
Masked shaman-Storyboard 2025
ashley0521
0
250
ほしいテンプレート制作から始めるツール学習のススメ📝
60d
0
110
横断組織デザイナーの働き方
mixi_design
PRO
0
440
aya_murakami_portfolio
ayakaimi1101
0
1.6k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
600
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Embracing the Ebb and Flow
colly
85
4.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
BBQ
matthewcrist
88
9.6k
Into the Great Unknown - MozCon
thekraken
38
1.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Automating Front-end Workflow
addyosmani
1370
200k
GraphQLとの向き合い方2022年版
quramy
46
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Ace a Technical Interview
jacobian
276
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