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
320
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
430
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
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
200
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
120
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.3k
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
280
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
230
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
300
Obsidian応用活用術
onikun94
1
390
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
450
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
800
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
1
260
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
280
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Code Review Best Practice
trishagee
70
19k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
4 Signs Your Business is Dying
shpigford
184
22k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Automating Front-end Workflow
addyosmani
1370
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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]