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
CSS Gird
Search
Kevin Dees
May 18, 2017
Programming
0
230
CSS Gird
Great web design starts with the grid
Kevin Dees
May 18, 2017
Tweet
Share
More Decks by Kevin Dees
See All by Kevin Dees
The Hidden Features Of CSS
kevindees
1
60
Create Your Own Theme Page-Builder in Minutes
kevindees
0
1.8k
Forms make the web
kevindees
1
180
Design for Developers
kevindees
1
98
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
kevindees
1
290
TypeRocket 3.0 - Unleash WordPress and Be Amazing
kevindees
0
580
Busting The Loop Lies
kevindees
2
120
Pragmatic WordPress Workflow
kevindees
2
260
Pragmatic WordPress WorkFlow: Theming
kevindees
0
620
Other Decks in Programming
See All in Programming
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
雑に思考を整理する技術と効能
konifar
55
25k
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
470
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
300
エンターテイメント業界で利用されるAWS
demuyan
0
200
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
790
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
"config" ってなんだ? / What is "config"?
okashoi
0
220
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
76
41k
Raft: Consensus for Rubyists
vanstee
132
6.2k
Clear Off the Table
cherdarchuk
83
310k
Teambox: Starting and Learning
jrom
128
8.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Designing for Performance
lara
601
67k
We Have a Design System, Now What?
morganepeng
42
6.7k
Transcript
1.61803398875
None
None
None
None
None
Order and creativity
The Anatomy of the Grid
Units Smallest vertical division
None
Columns Groups of units
None
Regions Groups of columns of any number
None
Fields Horizontal divisions
None
Gutters Empty spaces between units and columns
None
Margins and Padding Margins are space outside. Padding is space
inside Elements Headlines, buttons, images, etc. Modules Groups of elements
None
None
None
None
None
Grid Is Epic In Every Way
None
None
None
None
CSS Floats Have always been awesome
None
None
None
None
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
.left { width: 26%; box-sizing: border-box; float: left; } .right
{ box-sizing: border-box; margin-left: calc(26% + 20px); } .float { margin: auto; width: 960px; background: transparent url(float.png) repeat-y 0 25%; } .float:after { content: ''; display: block; clear: both; } <section class="float"> <div class="left"> left </div> <div class="right"> right </div> </section>
Floats are evil There must be a better way
CSS Grid
<div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer>
</div>
None
None
None
None
None
<div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer>
</div> .grid { display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto; max-width: 600px; margin: 100px auto; }
None
<div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer>
</div> header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; background: #fddf58; }
<div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer>
</div> .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; background: #e68930; }
<div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer>
</div> .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; background: #1a98f9; }
<div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer>
</div> .info { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; background: #fff; }
<div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer>
</div> footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; background: #fddf58; }
None
.grid { display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto; max-width:
600px; margin: 100px auto; grid-column-gap: 20px; grid-row-gap: 20px; }
None
<div class="grid"> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div> <footer>footer</footer>
<div class="extra">Extra section</div> </div> .extra { background: #fff; }
None
Implicit and Explicit Grid
.grid { grid-template-columns: 1fr 3fr; grid-template-rows: 120px 120px auto 120px;
}
None
Complex Layouts
None
Do you need a framework?
Nope
Ascii Art \`\ /`/ \ V / /. .\ =\
T /= / ^ \ /\\ //\ __\ " " /__ (____/^\____)
None
.grid { grid-template-areas: "header header" "sidebar content" "info content" "footer
footer"; } header { grid-area: header; background: #fddf58; } .sidebar { grid-area: sidebar; background: #e68930; } .content { grid-area: content; background: #1a98f9; } .info { grid-area: info; background: #fff; } footer { grid-area: footer; background: #fddf58; }
None
.grid { grid-template-areas: "header header" "sidebar ." "info content" "footer
footer"; }
None
.grid { grid-template-areas: "header content" "sidebar content" "info content" "footer
footer"; }
None
.grid { grid-template-areas: "header header info" "sidebar content info" ".
content info" "footer footer footer"; } .grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 120px 120px 120px 120px; }
None
.grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 120px 120px 120px
120px; } .grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 120px 120px 120px 120px; }
.grid { max-width: 640px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ); grid-template-rows:
auto; } header { background: #fddf58; } .sidebar { background: #e68930; } .content { background: #1a98f9; } .info { background: #fff; } footer { background: #fddf58; }
None
Browser Support
IE Created CSS Grid!
None
None
Are we back to browser sniffing?
None
@supports (display: grid) { .grid { grid-template-areas: "header content" "sidebar
content" "info content" "footer footer"; } }
Fallbacks
Flexbox
Accessability
<div class="grid"> <footer>footer</footer> <header>header</header> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="info">info</div>
</div>
Rachel Andrews - Grid by Design
Rachel Andrews - Talk
“Great web design starts with the grid”