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
100
Create Your Own Theme Page-Builder in Minutes
kevindees
0
2.1k
Forms make the web
kevindees
1
280
Design for Developers
kevindees
1
160
TypeRocket 3.0: Unleash WordPress and be amazing (Wilmington NC)
kevindees
1
380
TypeRocket 3.0 - Unleash WordPress and Be Amazing
kevindees
0
840
Busting The Loop Lies
kevindees
2
150
Pragmatic WordPress Workflow
kevindees
2
300
Pragmatic WordPress WorkFlow: Theming
kevindees
0
660
Other Decks in Programming
See All in Programming
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
CSC305 Summer Lecture 06
javiergs
PRO
0
100
Ruby Parser progress report 2025
yui_knk
1
120
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
The State of Fluid (2025)
s2b
0
200
testingを眺める
matumoto
1
110
CSC305 Summer Lecture 12
javiergs
PRO
0
130
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
How to Ace a Technical Interview
jacobian
279
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Building Applications with DynamoDB
mza
96
6.6k
Gamification - CAS2011
davidbonilla
81
5.4k
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”