Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Intro to CSS Grid
Charlotte Jackson
November 22, 2017
Technology
0
96
Intro to CSS Grid
Charlotte Jackson
November 22, 2017
Tweet
Share
More Decks by Charlotte Jackson
See All by Charlotte Jackson
A design system product
lottejackson
5
650
Introduction to CSS Grid
lottejackson
1
88
CSS: Current, Soon, Someday (Web Directions Code 2017)
lottejackson
10
5.4k
From Pages to Patterns
lottejackson
1
210
CSS: Current, Soon, Someday
lottejackson
1
470
Other Decks in Technology
See All in Technology
スクラム導入して変わったチーム、組織のありかた
yumechi
0
170
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
670
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由 〜モリサワの SaaS 戦略〜
tomuro
0
120
- Rでオブジェクト指向プログラミング- クラス設計入門の入門
kotatyamtema
1
720
エアドロップ for オープンソースプロジェクト
epicsdao
0
370
03_ユーザビリティテスト
kouzoukaikaku
0
180
230125 古いタブレットの活用 かーでぃさん
comucal
PRO
0
15k
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
130
OpenShift.Run2023_create-aro-with-terraform
ishiitaiki20fixer
1
220
Pentesting Password Reset Functionality
anugrahsr
0
420
PHPのimmutable arrayとは
hnw
1
150
Optimizing your Swift code
kateinoigakukun
0
1.4k
Featured
See All Featured
The Mythical Team-Month
searls
210
40k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Making Projects Easy
brettharned
102
4.8k
Agile that works and the tools we love
rasmusluckow
320
20k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
400
Thoughts on Productivity
jonyablonski
49
2.7k
The Invisible Side of Design
smashingmag
292
48k
Optimizing for Happiness
mojombo
365
64k
Designing the Hi-DPI Web
ddemaree
273
32k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
Done Done
chrislema
178
14k
Transcript
None
Charlotte Jackson Interface Developer & Product Manager @lottejackson
Intro to CSS Grid Charlotte Jackson Interface developer, Ansarada @lottejackson
Intro to CSS Grid Charlotte Jackson Interface developer, Ansarada @lottejackson
Flexbox CSS grid
.parent { display: grid; }
None
Track Track Track
.parent { display: grid; grid-template-columns: 100px 100px 200px; grid-template-rows: 50px
200px 50px; }
.parent { display: grid; grid-template-columns: 100px 100px 200px; grid-template-rows: 50px
200px 50px; } 100px 100px 200px 50px 200px
.parent { display: grid; grid-template-columns: 100px 100px 200px; grid-template-rows: 50px
200px 50px; grid-gap: 10px; }
But what about a flexible grid?
fr
.parent { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;
}
.parent { display: grid; grid-template-columns: repeat(3, 1fr); }
.parent { display: grid; grid-template-columns: 1fr 2fr 1fr; }
.parent { display: grid; grid-template-columns: 1fr 300px 1fr; }
auto-fill auto-fit
.parent { display: grid; grid-template-columns: repeat(auto-fill, 200px); }
.parent { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
None
None
None
None
None
None
None
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
None
Don’t stop!
None
None
.Grid { display: grid; grid-template-columns: repeat(4, minmax(155px, 1fr)); } .Grid-item
{ grid-column: 2 / 4; } .Grid-item:nth-child(3n+2) { grid-column: 1 / 3; } .Grid-item:nth-child(5n+3), .Grid-item:nth-child(7n+5) { grid-column: 3 / 5; }
.parent { grid-column: 2 / 4; }
https://rachelandrew.co.uk
http://jensimmons.com/
@lottejackson Thanks
@lottejackson http://cssgridgarden.com/