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
34
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
23
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
47
Let's get visual!
marybaum
0
330
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
370
My favorite design tool ... is a browser.
marybaum
0
43
Let's Get Visual!
marybaum
0
170
Themes_101.pdf
marybaum
0
230
Gutenberg.pdf
marybaum
0
120
Header logos and favicons!
marybaum
0
180
Other Decks in Design
See All in Design
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
23
2.1k
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo
yasuhiroyokota
2
1k
Lecciones de desarrollo de producto en Get on Board
getonbrd
0
200
Jeremy's First Day
myates3
1
120
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
17
5.4k
アイキャッチはFigmaで簡単に作れる!
kubosaya
0
840
Ride or Die Animatics
warwatkar
0
130
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.1k
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
280
社内管理画面のデザインもプロダクトデザイン
takanorip
3
680
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
decksh object reference
ajstarks
2
890
Featured
See All Featured
What's new in Ruby 2.0
geeforr
335
31k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
For a Future-Friendly Web
brad_frost
170
8.9k
Ruby is Unlike a Banana
tanoku
95
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
How GitHub (no longer) Works
holman
301
140k
Atom: Resistance is Futile
akmur
258
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Clear Off the Table
cherdarchuk
82
310k
Docker and Python
trallard
33
2.6k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
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