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
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
270
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
300
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
510
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Visualization
eitanlees
148
16k
Writing Fast Ruby
sferik
628
62k
KATA
mclloyd
32
14k
Code Reviewing Like a Champion
maltzj
525
40k
Done Done
chrislema
185
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Producing Creativity
orderedlist
PRO
347
40k
Building Adaptive Systems
keathley
43
2.7k
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]