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
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
290
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
1.1k
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
1.3k
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
180
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
290
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
350
ゼロからはじめる採用広報
yutadayo
3
1k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
220
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
400
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
2
880
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building Adaptive Systems
keathley
43
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How STYLIGHT went responsive
nonsquared
100
5.6k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
A Modern Web Designer's Workflow
chriscoyier
695
190k
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 | jess@eldredge.io