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
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
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
41
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
72
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
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
webnaut
1
150
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは?~操作を減らし、成果を最大にするための設計~
ncdc
1
660
2026年の勢い / Momentum for 2026
bebe
0
470
2026の目標「もっと定量的に事業、会社へ貢献する!」
yuri_ohashi
0
840
Техники структурирования беседы с собой, заказчиком и командо
ashapiro
0
170
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
220
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
440
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
3.3k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
abokadotyann
4
900
Storyboard Assignment: Storyboard from Comic Strip
lynteo
3
280
AI時代に必要な アイデアの形
uxman
0
210
hicard_credential_202601
hicard
0
250
Featured
See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
590
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.9k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.4k
First, design no harm
axbom
PRO
2
1.2k
Crafting Experiences
bethany
1
180
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
330
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
The Curious Case for Waylosing
cassininazir
1
390
WCS-LA-2024
lcolladotor
0
640
Are puppies a ranking factor?
jonoalderson
1
3.6k
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