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
Mary Baum
May 13, 2018
Design
210
0
Share
Momma's CSS Grid, updated again!
A little more depth on breakpoints and why they're a convenient fiction.
Mary Baum
May 13, 2018
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
36
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
70
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
59
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
もう迷わない!“なんとなく”を卒業するフォントの選び方【村田俊英】
toshihidemurata
0
480
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
1
640
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
560
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.4k
設計と制作 意図を形に表す / Design and Making: Intent Made Form
usagimaru
3
1.9k
Drawing_for_Anim_Final_PDF.pdf
lynteo
2
150
コンテンツ作成者の体験を設計する
chiilog
0
170
Storyboard Exercise: Chase Sequence
lynteo
1
310
2026の目標「もっと定量的に事業、会社へ貢献する!」
yuri_ohashi
0
830
ISO 9241-171:2025っていうのがあってな
shosira
1
140
公開スライド)熊本市様-電子申請中級編
garyuten
0
1.3k
UI/UX & Web Design Portfolio 2025|Madoka Kumagai
madoka_portfolio
4
240
Featured
See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
240
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
260
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
150
Making the Leap to Tech Lead
cromwellryan
135
9.9k
The Cost Of JavaScript in 2023
addyosmani
55
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.2k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
340
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
560
Documentation Writing (for coders)
carmenintech
77
5.4k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
130
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