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
440
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
360
TypeRocket 3.0 - Unleash WordPress and Be Amazing
kevindees
0
820
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
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
910
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
880
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Rails Girls Zürich Keynote
gr2m
95
14k
For a Future-Friendly Web
brad_frost
179
9.8k
Agile that works and the tools we love
rasmusluckow
329
21k
How STYLIGHT went responsive
nonsquared
100
5.6k
Building an army of robots
kneath
306
45k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.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”