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
450
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
110
Create Your Own Theme Page-Builder in Minutes
kevindees
0
2.1k
Forms make the web
kevindees
1
290
Design for Developers
kevindees
1
170
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
kevindees
1
380
TypeRocket 3.0 - Unleash WordPress and Be Amazing
kevindees
0
870
Busting The Loop Lies
kevindees
2
160
Pragmatic WordPress Workflow
kevindees
2
310
Pragmatic WordPress WorkFlow: Theming
kevindees
0
670
Other Decks in Programming
See All in Programming
CSC509 Lecture 06
javiergs
PRO
0
260
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
790
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
410
クラシルを支える技術と組織
rakutek
0
200
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
200
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
390
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Invisible Side of Design
smashingmag
301
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Statistics for Hackers
jakevdp
799
220k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Designing Experiences People Love
moore
142
24k
Thoughts on Productivity
jonyablonski
70
4.9k
4 Signs Your Business is Dying
shpigford
185
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Scaling GitHub
holman
463
140k
KATA
mclloyd
32
15k
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”