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
240
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
31
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
62
Let's get visual!
marybaum
0
400
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
51
Let's Get Visual!
marybaum
0
230
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
ドルちゃん
design_dolphins
0
490
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
110
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
220
DESIGNEAST 2025 A-3
_kotobuki_
0
110
kintone_aroma
kintone
0
710
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
210
Shaolin_Showdown
solmetts
0
110
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
420
Correspondence:共に生成していく過程
akiramotomura
0
130
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
680
Installing and Running decksh/pdfdeck
ajstarks
1
890
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
0
150
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Leading Effective Engineering Teams in the AI Era
addyosmani
8
1.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Faster Mobile Websites
deanohume
310
31k
Building an army of robots
kneath
306
46k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
680
A Modern Web Designer's Workflow
chriscoyier
697
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
11
940
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
680
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.8k
The Pragmatic Product Professional
lauravandoore
36
7k
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