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
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
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
44
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
77
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
72
Let's Get Visual!
marybaum
0
260
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
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
3
5.1k
1000人規模の組織でデザインハーネスを導入するための第一歩
pkshadeck
PRO
5
3.8k
開閉UIのアニメーション設計
hiro0218
2
1k
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
550
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
370
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
210
開発・制作におけるUI・UXデザインの重要性について~UI・UXデザインってなんだろう~
yamasaku
0
220
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
deadlinepoet
0
360
Signull 団体説明資料
signull
0
810
2026-04-06 CMU School of Design "Vision-Driven Design"
ishii_mit
0
140
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
660
Debiasing Your Software Design Decision-Making @ Flowcon '26
baasie
1
170
Featured
See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
930
Evolving SEO for Evolving Search Engines
ryanjones
0
280
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Everyday Curiosity
cassininazir
0
310
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.4k
Discover your Explorer Soul
emna__ayadi
2
1.3k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
270
Paper Plane (Part 1)
katiecoart
PRO
1
11k
Design in an AI World
tapps
1
310
Utilizing Notion as your number one productivity tool
mfonobong
4
580
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
410
So, you think you're a good person
axbom
PRO
2
2.1k
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