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
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
34
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
66
Let's get visual!
marybaum
0
420
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
54
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
CULTURE DECK/Frontend Engineer
mhand01
0
950
2026年、デザイナーはなにに賭ける?
0b1tk
0
510
Vibe Coding デザインシステム
poteboy
3
1.7k
公開スライド)熊本市様-電子申請中級編
garyuten
0
1k
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
6
830
CREATIVE CLASS受講課題|無印良品を題材としたブランド再構築について
happy_ferret153
0
700
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
3k
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
190
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
320
爆速開発でAIプロダクトが40万インプレッションになった話
tsubura
0
200
Treasure_Hunting
solmetts
0
310
2026年の勢い / Momentum for 2026
bebe
0
390
Featured
See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
200
Mind Mapping
helmedeiros
PRO
1
110
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
980
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
The Cost Of JavaScript in 2023
addyosmani
55
9.8k
Site-Speed That Sticks
csswizardry
13
1.1k
30 Presentation Tips
portentint
PRO
1
250
How to Think Like a Performance Engineer
csswizardry
28
2.5k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
380
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
210
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