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
Prototyping Layout with CSS Grid - RevolutionCo...
Search
Jessica Eldredge
May 18, 2018
Technology
1
310
Prototyping Layout with CSS Grid - RevolutionConf 2018
Presented at RevolutionConf, May 2018
Jessica Eldredge
May 18, 2018
Tweet
Share
More Decks by Jessica Eldredge
See All by Jessica Eldredge
Prototyping Layout with CSS Grid - Refresh DC
jessabean
1
420
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k
Front End Badassery with Sass
jessabean
9
390
Other Decks in Technology
See All in Technology
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
350
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
160
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
420
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.4k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
LLM時代の検索
shibuiwilliam
2
360
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
【Oracle Cloud ウェビナー】インフラのプロフェッショナル集団KELが考えるOCIでのソリューション実現
oracle4engineer
PRO
1
100
インフラ寄りSREの生存戦略
sansantech
PRO
4
1.6k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
4 Signs Your Business is Dying
shpigford
184
22k
Music & Morning Musume
bryan
46
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualization
eitanlees
146
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
GitHub's CSS Performance
jonrohan
1031
460k
Side Projects
sachag
455
42k
Transcript
Prototyping Layout with CSS Grid RevolutionConf • May 2018
Hello! Jess Eldredge Senior front-end engineer, Splice @jessabean
Grid systems: the foundation of design
None
None
None
None
Design challenge
None
None
None
Our requirements • Responsive: grid context changes across breakpoints •
Use CSS Grid! • Fallback for browsers that don’t support grid
What is CSS Grid Layout?
Floats • Width matters • Equal heights are brittle •
Don’t forget clearfix!
Floats • Width matters • Equal heights are brittle •
Don’t forget clearfix!
Flexbox • Equal height/width is easy • Vertical centering! •
Content flows in ONLY one dimension
Flexbox • Equal height/width is easy • Vertical centering! •
Content flows in ONLY one dimension
Flexbox • Equal height/width is easy • Vertical centering! •
Content flows in ONLY one dimension
CSS Grid • Layout in 2 dimensions • Children can
be placed in open cells of the grid
CSS Grid • Layout in 2 dimensions • Children can
be placed in open cells of the grid
CSS Grid • Layout in 2 dimensions • Children can
be placed in open cells of the grid
CSS Grid terms
grid container
grid item
grid line
grid track
grid cell
grid gap
grid gap
Setting up the grid
Markup for cuttlefish layout <div class="wrapper"> <div class="grid"> <h1 class="heading">Cuttlefish
Are Awesome!</h1> <div class="item item-1"> … </div> <div class="item item-2"> … </div> <div class="item item-3"> … </div> <div class="item item-4"> … </div> <a class="see-more">See more facts</a> </div> </div>
Centering our content wrapper .wrapper { max-width: 20em; margin-left: auto;
margin-right: auto; } @media screen and (min-width: 48em) { .wrapper { max-width: 38em; } } @media screen and (min-width: 64em) { .wrapper { max-width: 55em; } }
.grid { display: grid; } Declaring a grid
.grid { display: grid; grid-template-columns: 40px 40px 40px; } Grid-template-columns
.grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid
{ display: grid; grid-template-columns: 1fr 1fr 1fr; } Grid-template-columns
.grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid
{ display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; } Grid-template-columns
.grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid
{ display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; } .grid { display: grid; grid-template-columns: 100px 25% 1fr; } Grid-template-columns
.grid { display: grid; grid-template-columns: repeat(6, 1fr); } Grid-template-columns: repeat
function
.grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr);
} Grid-template-rows
.grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; }
Grid-gap
.grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; }
Grid-gap
.grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; }
// Shorthand is equivalent to: // grid-column-gap: 0.75em; // grid-row-gap: 0.75em; Grid-gap
@media screen and (min-width: 48em) { .grid { grid-template-columns: repeat(12,
1fr); } } @media screen and (min-width: 64em) { .grid { grid-template-columns: repeat(15, 1fr); grid-gap: 1.25em; } } Responsive grid settings
DEMO: Basic grid
Placing items on the grid
None
.grid > * { grid-column-start: 1; grid-column-end: 7; } Placing
grid items with grid-column-start
.grid > * { grid-column-start: 1; grid-column-end: 7; } Placing
grid items with grid-column-start
.grid > * { grid-column-start: 1; grid-column-end: 7; } Placing
grid items with grid-column-start
.grid > * { grid-column: 1 / 7; } Grid-column:
shorthand
.grid > * { grid-column: 1 / span 6; }
Grid-column: span syntax
.grid > * { grid-column: 1 / span 6; }
// Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: span 6; Grid-column: span syntax
.grid > * { grid-column: 1 / span 6; }
// Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: span 6; Grid-column: span syntax
.grid > * { grid-column: 1 / -1; } Grid-column:
negative grid lines
.grid > * { grid-column: 1 / -1; } //
Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: -1; Grid-column: negative grid lines
.grid { display: grid; }
.grid { display: grid; } .grid { display: grid; grid-template-columns:
repeat(6, 1fr); }
.grid { display: grid; } .grid { display: grid; grid-template-columns:
repeat(6, 1fr); } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; }
.grid { display: grid; } .grid { display: grid; grid-template-columns:
repeat(6, 1fr); } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid > * { grid-column: 1 / span 6; }
Detour! The implicit grid • Explicit grid: The grid
we define with grid-template-columns or grid-template-rows • Implicit grid: Automatically-created tracks to accommodate additional content
.grid { grid-auto-rows: auto; grid-auto-columns: auto; } The implicit grid
at work
.grid { grid-auto-rows: auto; grid-auto-columns: auto; } The implicit grid
at work
.grid { grid-auto-rows: auto; grid-auto-columns: auto; } The implicit grid
at work
.grid { grid-auto-rows: auto; grid-auto-columns: auto; } The implicit grid
at work
None
@media screen and (min-width: 48em) { }
@media screen and (min-width: 48em) { } @media screen and
(min-width: 48em) { .heading { grid-column: 1 / span 9; } .see-more { grid-column: 10 / span 3; } }
@media screen and (min-width: 48em) { .heading { grid-column: 1
/ span 9; grid-row: 1; } .see-more { grid-column: 10 / span 3; grid-row: 1; } }
@media screen and (min-width: 48em) { .item-1 { grid-column: 1
/ span 12; } .item-2 { grid-column: 1 / span 4; } .item-3 { grid-column: 5 / span 4; } .item-4 { grid-column: 9 / span 4; } }
None
@media screen and (min-width: 64em) { }
@media screen and (min-width: 64em) { } @media screen and
(min-width: 64em) { .heading { grid-column: 1 / span 12; } .see-more { grid-column: 13 / span 3; } }
@media screen and (min-width: 64em) { .item-2 { grid-column: 13
/ span 3; } .item-3 { grid-column: 13 / span 3; } .item-4 { grid-column: 13 / span 3; } }
@media screen and (min-width: 64em) { .item-1 { grid-column: 1
/ span 12; grid-row: 2 / span 3; } }
VIDEO: Final grid at all breakpoints
Progressive enhancement
None
• No auto-placement of grid items • No grid-gap •
Grid-column shorthand only specifies start line -ms-grid syntax limitations Applies to IE11, MS Edge <16
Using feature queries to target CSS Grid at modern browsers
@supports (display: grid) { // css grid styles go here }
Using feature queries to target CSS Grid at modern browsers
@supports (display: grid) { // css grid styles go here } .grid { display: flex; }
.grid { display: flex; flex-wrap: wrap; flex-direction: column; } .grid
> * { flex: 1 1 auto; } @supports (display: grid) { // css grid styles go here }
.grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem;
} .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { // css grid styles go here }
.grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem;
} .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { // css grid styles go here } .grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem; } .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { .grid, .grid > * { margin: 0; } }
@media screen and (min-width: 48em) { .grid { flex-direction: row;
} .heading { flex-basis: calc(75% - 0.75rem); } .item-1 { flex-basis: calc(100% - 0.75rem); } .item-2, .item-3, .item-4 { flex-basis: calc(33.333% - 0.75rem); } .see-more { flex-basis: calc(25% - 0.75rem); } }
@media screen and (min-width: 48em) { .heading { order: 1;
} .see-more { order: 2; } .item-1 { order: 3; } .item-2 { order: 4; } .item-3 { order: 5; } .item-4 { order: 6; } } @supports (display: grid) { .grid > * { order: unset; } }
@media screen and (min-width: 64em) { .grid { margin: -0.625rem;
} .grid > * { margin: 0.625rem; } }
@media screen and (min-width: 64em) { .grid { margin: -0.625rem;
} .grid > * { margin: 0.625rem; } } @media screen and (min-width: 64em) { .heading, .item-1 { flex-basis: calc(80% - 1.25rem); } .item-2, .item-3, .item-4, .see-more { flex-basis: calc(20% - 1.25rem); } }
@media screen and (min-width: 64em) { .grid { margin: -0.625rem;
} .grid > * { margin: 0.625rem; } } @media screen and (min-width: 64em) { .heading, .item-1 { flex-basis: calc(80% - 1.25rem); } .item-2, .item-3, .item-4, .see-more { flex-basis: calc(20% - 1.25rem); } }
Flexbox limitations
@media screen and (min-width: 64em) { .heading { flex-basis: calc(80%
- 1.25rem); } .item-1 { flex-basis: calc(100% - 1.25rem); } .item-2, .item-3, .item-4 { flex-basis: calc(33.333% - 1.25rem); } .see-more { flex-basis: calc(20% - 1.25rem); } }
There’s a lot more to CSS Grid
• Named column lines • grid-template-area • grid-auto-rows / grid-auto-columns
/ grid-auto-flow • auto-fill & auto-fit • minmax More Grid features
• Source order and semantics are important • Use grid
placement for visual display, but be mindful of document order for speech and keyboard navigation • Tab order will follow document order, not visual order CSS Grid and Accessibility
CSS Grid or Flexbox?
CSS Grid or Flexbox?
CSS Grid or Flexbox?
You can use CSS Grid TODAY
None
None
None
http://labs.jensimmons.com/2017/01-005.html
http://redonion.se/cssgrid/
https://gridsetapp.com/specs/fonmon/?gridset=show
Do we need grid systems?
https://www.rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/
– Miriam Suzanne http://oddbird.net/2017/06/28/susy3/ “If you have the browser-support matrix
to start using the CSS Grid module directly, you should do it, and forget about Susy.”
placeholder: screenshot simplified grid for prototype
placeholder: screenshot simplified grid for prototype
Resources • Rachel Andrew: https://gridbyexample.com/learn/ • Jen Simmons: http://jensimmons.com/post/feb-27-2017/learn-css-grid •
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout • CSSWG: https://github.com/w3c/csswg-drafts/issues
• Download Firefox! • Examine your browser support requirements •
Start CSS Grid conversation between design and development • Choose a feature and start using CSS Grid Layout! Next Steps
None
Thank you! Links to demo code https://grid-prototype-revconf2018.glitch.me/ https://github.com/jessabean/grid-prototype-revconf2018 Slides https://speakerdeck.com/jessabean/prototyping-layout-with-css-grid-revconf2018
@jessabean |
[email protected]