Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Momma's CSS Grid, updated again!
Search
Mary Baum
May 13, 2018
Design
220
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Momma's CSS Grid, updated again!
A little more depth on breakpoints and why they're a convenient fiction.
Mary Baum
May 13, 2018
Transcript
74 slides
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
Really!
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
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
46
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
85
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
430
My favorite design tool ... is a browser.
marybaum
0
75
Let's Get Visual!
marybaum
0
280
Themes_101.pdf
marybaum
0
290
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
220
Other Decks in Design
See All in Design
[Unity] VAT×VFX Graphがいま個人的にアツイという話
sakiyama
0
150
Bet AI Day 2026丨デザインハーネス:専門職の判断基準をコードのように運用する
layerx
PRO
6
7.9k
HeartLanguage - DesignProcess
heartlanguage
0
860
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
abokadotyann
2
500
プレゼンスライド作成で意識していること
kimichan
0
160
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
1.3k
From Desktop to Spatial Interfaces UX Design Implications of Evolving Interaction Paradigms
hcrane
0
150
Typographie et intégration web
goetter
0
190
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
420
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
4
5.7k
ひとりで作れる時代に、判断をみんなで持つには
kgsi
1
170
LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-
niccy
0
2.3k
Featured
See All Featured
Building Adaptive Systems
keathley
44
3.3k
HDC tutorial
michielstock
2
1k
Unsuck your backbone
ammeep
672
58k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.8k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
480
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.4k
Practical Orchestrator
shlominoach
192
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
630
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3.1k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
1
660