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 got a brand-new grid.
Search
Mary Baum
October 14, 2017
Design
0
37
Momma's got a brand-new grid.
Version 1.1
Updated with a few more slides that, ahem, should have been in the original.
Mary Baum
October 14, 2017
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
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.8k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
Yumika Yamada Portfolio
yumii
0
460
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
520
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
160
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
150
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Language of Interfaces
destraynor
158
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Thoughts on Productivity
jonyablonski
69
4.7k
Transcript
Psst …
None
None
None
None
None
None
Now let’s pay some dues.
We’re here for two reasons. Jen Simmons Rachel Andrew
A tiny taste: http://labs.jensimmons.com/ http://jensimmons.com/post/ feb-27-2017/learn-css-grid
A tiny taste: http://gridbyexample.com https://gridbyexample.com/video/
And so much more.
So. Grid.
What is it? Where do we use it? Does it
work with Flexbox? How to get started?
What it’s not: A plugin A framework A page-builder A
panacea (much)
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
Thanks, Foundation. You taught me some great php.
None
How about inside a post? For this theme only,
I scrapped the image-gallery plugins.
None
None
None
None
None
None
Why, yes! You can mix units.
None
.wrapper { display: grid; grid-gap: 10px; grid-template-columns: 200px 2fr 20vw
20rem; grid-template-rows: repeat(4, 200px); background-color: #cf0; color: #ff5; } .box { background: #09f; color: #fff; border-radius: 5px; padding: 20px; font: normal 300 3rem/1 montserrat; } .a { border-radius: 200%; grid-column: 1; grid-row: 2; margin: 2.5rem; padding: 2rem 1rem; text-align: center; } .b { grid-column: 4 ; grid-row: 1 / 5; } .c { grid-column: 1 / 3 ; grid-row: 3 / 4 ; } .d { grid-column: 2; grid-row: 2; } .e { grid-column: 3 / 4; grid-row: 3 / 5; } https://codepen.io/marybaum/pen/bodZbe
Does it work with Flexbox?
None
None
None
Browser support?
None
Mary Baum @marybaum