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
400
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
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
420
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
830
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
710
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
1
880
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
540
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
160
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
380
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
670
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
140
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
アクセシビリティに取り組むメリット
magi1125
2
270
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
How STYLIGHT went responsive
nonsquared
100
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
A better future with KSS
kneath
239
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
BBQ
matthewcrist
89
9.9k
Facilitating Awesome Meetings
lara
57
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
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