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
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Goで作る、開発・CI環境
sin392
0
230
PipeCDのプラグイン化で目指すところ
warashi
1
280
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Discover Metal 4
rei315
2
140
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Raft: Consensus for Rubyists
vanstee
140
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
4 Signs Your Business is Dying
shpigford
184
22k
Code Review Best Practice
trishagee
69
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A better future with KSS
kneath
238
17k
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”