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
190
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
30
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
59
Let's get visual!
marybaum
0
390
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
48
Let's Get Visual!
marybaum
0
210
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
200
Other Decks in Design
See All in Design
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
340
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
190
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
570
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
470
AI動画生成ガチャ紹介
piyo7
1
110
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
600
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
3
860
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
240
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
660
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Documentation Writing (for coders)
carmenintech
72
4.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Music & Morning Musume
bryan
46
6.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Building an army of robots
kneath
306
45k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
KATA
mclloyd
30
14k
Faster Mobile Websites
deanohume
307
31k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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