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, updated again!
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Mary Baum
May 13, 2018
Design
0
200
Momma's CSS Grid, updated again!
A little more depth on breakpoints and why they're a convenient fiction.
Mary Baum
May 13, 2018
Tweet
Share
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
32
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
65
Let's get visual!
marybaum
0
410
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
53
Let's Get Visual!
marybaum
0
240
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
150
Header logos and favicons!
marybaum
0
200
Other Decks in Design
See All in Design
チームをデザイン対象にする / Design for your team
kaminashi
1
530
これからの「Webデザイン」の話をしよう~デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値~
ds35mm
0
540
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
300
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
500
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
850
はじめての演奏会フライヤーデザイン
chorkaichan
1
220
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
7k
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
300
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
230
Shaolin_Showdown
solmetts
0
290
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
0
480
mount_company_profile
mount_inc
0
4.9k
Featured
See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
450
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
57
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
0
1.9k
Docker and Python
trallard
47
3.7k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
290
How to train your dragon (web standard)
notwaldorf
97
6.5k
Prompt Engineering for Job Search
mfonobong
0
160
The Invisible Side of Design
smashingmag
302
51k
Code Review Best Practice
trishagee
74
20k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
65
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
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