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
42
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
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
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
hiro93n
1
330
PAMPHLET.pdf
mhand01
0
1k
AI時代に求められるUXデザインのアプローチ
xtone
1
6.7k
AIスライド生成を進化させるMDファイル
kenichiota0711
1
1.4k
「バイブコーディングって何?」から始まった、 AIとの一年間と、その先のこと
seto
0
660
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
1.2k
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
1.3k
2026の目標「もっと定量的に事業、会社へ貢献する!」
yuri_ohashi
0
870
kintone開発におけるライターの役割の変化〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
keroyama
0
140
絵や写真から学ぶ、要素がもたらす副作用
kspace
0
430
Claudeもくもく会、はじめませんか?
yusukeiyoda
0
120
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
7
5.7k
Featured
See All Featured
Game over? The fight for quality and originality in the time of robots
wayneb77
1
220
4 Signs Your Business is Dying
shpigford
187
22k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
1k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
330
Optimising Largest Contentful Paint
csswizardry
37
3.8k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
320
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.8k
Google's AI Overviews - The New Search
badams
0
1.1k
Music & Morning Musume
bryan
47
7.3k
Writing Fast Ruby
sferik
630
63k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
sira's awesome portfolio website redesign presentation
elsirapls
0
300
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