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
61
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
410
My favorite design tool ... is a browser.
marybaum
0
50
Let's Get Visual!
marybaum
0
230
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
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
210
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
500
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
680
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.3k
The Spectacular Lies of Maps
axbom
PRO
1
300
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
260
#Dubois Challenge 2025: Economics
ajstarks
1
190
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
350
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
510
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
200
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
BBQ
matthewcrist
89
9.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
The Cult of Friendly URLs
andyhume
79
6.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Writing Fast Ruby
sferik
629
62k
How to Ace a Technical Interview
jacobian
280
24k
Navigating Team Friction
lara
189
15k
Building an army of robots
kneath
306
46k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Thoughts on Productivity
jonyablonski
70
4.9k
Bash Introduction
62gerente
615
210k
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