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
180
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
28
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
56
Let's get visual!
marybaum
0
380
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
400
My favorite design tool ... is a browser.
marybaum
0
46
Let's Get Visual!
marybaum
0
200
Themes_101.pdf
marybaum
0
260
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
190
Other Decks in Design
See All in Design
Marp + TailWind CSS でスライドをきれいにする
maea2
0
110
Dive Deep into Communication
yomtsu
0
250
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.2k
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5.3k
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
310
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
1k
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.4k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
190
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
170
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
11k
「デザイン」を信じるには
iflection
0
190
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
470
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A better future with KSS
kneath
239
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Why Our Code Smells
bkeepers
PRO
336
57k
Building Adaptive Systems
keathley
41
2.5k
Making Projects Easy
brettharned
116
6.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
Docker and Python
trallard
44
3.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
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