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
170
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
27
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
54
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
390
My favorite design tool ... is a browser.
marybaum
0
45
Let's Get Visual!
marybaum
0
170
Themes_101.pdf
marybaum
0
250
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
190
Other Decks in Design
See All in Design
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
290
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
170
Карта процесса-опыта. Презентация метода
ashapiro
0
320
ブランドづくりの双視点 - GUILD #31 ブランディング勉強会
yampuu
0
100
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.3k
新しいemoji😄のアイデアをUnicodeが募集中‼️🏃♀️💨💨💨傾向を学んでみんな提案しよう💪
oguemon
2
680
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
32k
Kim Possible - Crush
olgastoryboard
0
130
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.2k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
660
ZOZO CDO Office Design
zozodevelopers
PRO
1
420
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
830
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing the Hi-DPI Web
ddemaree
280
34k
Writing Fast Ruby
sferik
627
61k
We Have a Design System, Now What?
morganepeng
50
7.2k
Adopting Sorbet at Scale
ufuk
73
9.1k
Typedesign – Prime Four
hannesfritz
40
2.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
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