A presentation at Upfront Conf in in Manchester, UK by Michelle Barker
Building Intelligent Layouts with CSS Grid @mbarker_84
“Intrinsic Web Design” Jen Simmons @mbarker_84
@mbarker_84
@mbarker_84
css-irl.info
Why do we need Grid? 2D layout @mbarker_84
“Flexbox is great for taking a bunch of oddly-sized things and returning the most reasonable layout for those things” Rachel Andrew @mbarker_84
Why do we need Grid? Simpler HTML and CSS @mbarker_84
Why do we need Grid? Complete control @mbarker_84
Grid terminology @mbarker_84
Grid terminology Grid display: grid; @mbarker_84
Grid terminology Tracks grid-template-rows @mbarker_84
Grid terminology Tracks grid-template-columns @mbarker_84
Grid terminology Cells @mbarker_84
Grid terminology Grid areas @mbarker_84
Grid terminology Gutters column-gap (Formerly grid-column-gap) @mbarker_84
Grid terminology Gutters row-gap (Formerly grid-row-gap) @mbarker_84
Defining a grid @mbarker_84
CSS .grid { display: grid; } @mbarker_84 codepen.io/michellebarker/pen/eLZwVg
CSS .grid { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 150px 150px 150px 150px; } @mbarker_84 codepen.io/michellebarker/pen/eLZwVg
CSS .grid { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 150px 150px 150px 150px; column-gap: 20px; row-gap: 20px; } @mbarker_84 codepen.io/michellebarker/pen/eLZwVg
@mbarker_84 codepen.io/michellebarker/pen/eLZwVg
CSS repeat() .grid { display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: repeat(4, 150px); } @mbarker_84 grid-gap: 20px; codepen.io/michellebarker/pen/eLZwVg
CSS Shorthand .grid { display: grid; grid-template: repeat(4, 150px) / repeat(4, 200px); } @mbarker_84 codepen.io/michellebarker/pen/eLZwVg
CSS Shorthand .grid { display: grid; grid-template: repeat(4, 150px) / repeat(4, 200px); gap: 20px; // row-gap / column-gap } @mbarker_84 codepen.io/michellebarker/pen/eLZwVg
CSS Flexible units (fr) .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @mbarker_84 grid-template-rows: repeat(4, 150px); gap: 20px; codepen.io/michellebarker/pen/eLZwVg
Fr a fraction of the leftover space in the grid container @mbarker_84
CSS Flexible units (fr) .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @mbarker_84 grid-template-rows: repeat(4, 150px); gap: 20px; codepen.io/michellebarker/pen/eLZwVg
1fr @mbarker_84 1fr 1fr 2fr
CSS Flexible units (fr) .grid { display: grid; grid-template-columns: repeat(3, 200px) 1fr; } @mbarker_84 grid-template-rows: repeat(4, 150px); gap: 20px; codepen.io/michellebarker/pen/eLZwVg
200px @mbarker_84 200px 200px 1fr codepen.io/michellebarker/pen/wEdjqX
Implicit vs Explicit tracks @mbarker_84
CSS Implicit tracks .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; } @mbarker_84 gap: 20px; codepen.io/michellebarker/pen/eLZwVg
CSS Implicit tracks .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 150px); grid-auto-rows: 150px; } @mbarker_84 gap: 20px; codepen.io/michellebarker/pen/eLZwVg
@mbarker_84 codepen.io/michellebarker/pen/eLZwVg
Placing items @mbarker_84
HTML Auto-placement <div class=”grid”> <div class=”grid__item”>1</div> <div class=”grid__item”>2</div> <div class=”grid__item”>3</div> </div> @mbarker_84 codepen.io/michellebarker/pen/gdrVXP
@mbarker_84 codepen.io/michellebarker/pen/gdrVXP
HTML Placing items by grid line <div class=”grid”> <header></header> <main></main> <aside></aside> </div> @mbarker_84
@mbarker_84 codepen.io/michellebarker/pen/YOqmjP
CSS Placing items by grid line header { grid-column-start: 1; grid-column-end: 5; } @mbarker_84 codepen.io/michellebarker/pen/YOqmjP
@mbarker_84 codepen.io/michellebarker/pen/YOqmjP
CSS Placing items by grid line main { grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end: 5; } aside { grid-column-start: 4; grid-column-end: 5; grid-row-start: 2; grid-row-end: 4; } @mbarker_84 codepen.io/michellebarker/pen/YOqmjP
@mbarker_84 codepen.io/michellebarker/pen/YOqmjP
CSS header { grid-column: 1 / 5; } main { grid-column: 1 / 4; grid-row: 2 / 5; } aside { // grid-column: 4 / 5; - unnecessary as will be auto-placed grid-row: span 2; } @mbarker_84 codepen.io/michellebarker/pen/YOqmjP
@mbarker_84 codepen.io/michellebarker/pen/YOqmjP
CSS Start line / end line main { grid-column: 1 / 4; grid-row: 2 / 4; } @mbarker_84 codepen.io/michellebarker/pen/YOqmjP
CSS Span (with auto-placement) main { grid-column: span 3; grid-row: 2 / 4; } @mbarker_84 codepen.io/michellebarker/pen/YOqmjP
CSS Start line / span main { grid-column: 1 / span 3; grid-row: 2 / 4; } @mbarker_84 codepen.io/michellebarker/pen/YOQLLZ
main { grid-column: 4 / span 3; } @mbarker_84 codepen.io/michellebarker/pen/rRoLRe
CSS Span / end line main { grid-column: span 3 / 4; grid-row: 2 / 4; } @mbarker_84 codepen.io/michellebarker/pen/YOqmjP
CSS Naming grid lines .grid { display: grid; grid-template-columns: [header-start main-start] repeat(3, 1fr) [main-end] 1fr [header-end]; grid-auto-rows: 150px; } @mbarker_84 codepen.io/michellebarker/pen/OobJaa
header-start main-start @mbarker_84 main-end header-end codepen.io/michellebarker/pen/OobJaa
CSS header { grid-column: header; } main { grid-column: main; grid-row: span 3; } @mbarker_84 codepen.io/michellebarker/pen/rqZevv
CSS grid-template-areas .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; grid-template-areas: gap: 20px; } @mbarker_84 “h “m “m “m h m m m h m m m h” a” a” .”;
CSS grid-template-areas header { grid-area: h; } main { grid-area: m; } aside { grid-area: a; } @mbarker_84
CSS Grid for Complex Components A Case Study @mbarker_84
@mbarker_84
@mbarker_84
HTML
<div class=”grid”> <h2 class=”grid__heading”></h2> <figure class=”grid__image”></figure> <div class=”grid__body”></div> </div>Some rules @mbarker_84
Dynamic content @mbarker_84
The heading must always be vertically centred over the image @mbarker_84
The heading must always be vertically centred over the image …no matter the size of the image or the text @mbarker_84
Text block must align to the top of the image @mbarker_84
Text block must align to the top of the image …unless the text is too long @mbarker_84
Space must always be maintained between the text block and heading @mbarker_84
Context-aware @mbarker_84
CSS Grid 2D Layout @mbarker_84
@mbarker_84
@mbarker_84
@mbarker_84
@mbarker_84
grid-template-columns: repeat(26, 1fr); @mbarker_84
grid-template-columns: repeat(26, 1fr); @mbarker_84
1fr @mbarker_84 repeat(24, 60px) 1fr
grid-template-columns: 1fr repeat(24, 60px) 1fr; @mbarker_84
minmax() minmax(20px, 1fr) Minimum size @mbarker_84 Maximum size
minmax(20px, 1fr) minmax(0, 60px) @mbarker_84 codepen.io/michellebarker/pen/wYGMPQ
grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); @mbarker_84
grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); @mbarker_84
grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); @mbarker_84
CSS .grid { display: grid; grid-template-columns: minmax(20px, 1fr) // flexible outer column repeat(24, minmax(0, 60px)) // 24 central columns minmax(20px, 1fr); // flexible outer column column-gap: 20px; }
grid-template-rows: 1fr auto 1fr; @mbarker_84
CSS .grid { display: grid; grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); grid-template-rows: 1fr auto 1fr; } @mbarker_84 column-gap: 20px;
CSS .grid { display: grid; grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); grid-template-rows: 1fr auto 1fr; gap: 40px 20px; } @mbarker_84
CSS .grid { display: grid; grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); grid-template-rows: 1fr auto 1fr; gap: 40px 20px; align-items: center; } @mbarker_84
CSS Placing items .grid { grid-template-columns: [outer-start] minmax(20px, 1fr) [wrapper-start] repeat(24, minmax(0, 60px)) [wrapper-end] minmax(20px, 1fr) [outer-end]; grid-template-rows: 1fr [heading-start] auto [heading-end] 1fr; … } @mbarker_84
CSS Placing items .grid { grid-template-columns: [outer-start] minmax(20px, 1fr) [wrapper-start] repeat(24, minmax(0, 60px)) [wrapper-end] minmax(20px, 1fr) [outer-end]; grid-template-rows: 1fr [heading-start] auto [heading-end] 1fr; … } @mbarker_84
CSS Placing items .grid { grid-template-columns: [outer-start] minmax(20px, 1fr) [wrapper-start] repeat(24, minmax(0, 60px)) [wrapper-end] minmax(20px, 1fr) [outer-end]; grid-template-rows: 1fr [heading-start] auto [heading-end] 1fr; … } @mbarker_84
CSS .grid__image { grid-column: wrapper-start / 14; grid-row: 1 / -1; } .grid__body { grid-column: span 5 / wrapper-end; grid-row: 1; align-self: flex-start; } .grid__heading { grid-column: 5 / -5; grid-row: heading; } @mbarker_84
CSS .grid__image { grid-column: wrapper-start / 14; grid-row: 1 / -1; } .grid__body { grid-column: span 5 / wrapper-end; grid-row: 1; align-self: flex-start; } .grid__heading { grid-column: 5 / -5; } @mbarker_84 grid-row: heading;
CSS .grid__image { grid-column: wrapper-start / 14; grid-row: 1 / -1; } .grid__body { grid-column: span 5 / wrapper-end; grid-row: 1; align-self: flex-start; } .grid__heading { grid-column: 5 / -5; grid-row: heading; } @mbarker_84
@mbarker_84
@mbarker_84
I didn’t solve this problem @mbarker_84
Gutter rows @mbarker_84
Secret hidden row @mbarker_84
grid-template-rows: 1fr auto 40px auto 40px auto; @mbarker_84
grid-template-rows: 1fr auto 40px auto 40px auto; @mbarker_84
grid-template-rows: 1fr auto 40px auto 40px auto; @mbarker_84
grid-template-rows: 1fr auto 40px auto 40px auto; @mbarker_84
@mbarker_84
@mbarker_84
CSS .grid { … grid-template-rows: [text-start] 1fr auto [text-end] 40px // gap [heading-start] auto [heading-start] 40px // gap auto; … } @mbarker_84
.grid__body { grid-row: text; } @mbarker_84
@mbarker_84
grid-template-rows: auto 40px auto 40px auto 1fr; Secret hidden row @mbarker_84
CSS .grid—text-bottom { grid-template-rows: auto 40px [heading-start] auto [heading-end] 40px [text-start] auto 1fr [text-end]; // hidden row } @mbarker_84
CSS .grid—text-bottom .grid__body { align-self: flex-end; } @mbarker_84
CSS .grid—text-bottom { grid-template-rows: [media-start] auto 40px [heading-start] auto [heading-end] 40px [text-start] auto [media-end] 1fr [text-end]; } Component variants .grid—text-bottom .grid__body { align-self: flex-end; } @mbarker_84
SCSS /* Second variant of our component */ .grid—2 { .grid__image { grid-column: 13 / outer-end; } .grid__body { grid-column: wrapper-start / span 5; } } @mbarker_84
CSS Variables (a.k.a. Custom Properties) @mbarker_84
Dynamic variables
CSS Defining variables :root { —bgColor: red; } @mbarker_84
CSS Using variables .my-component { background-color: var(—bgColor); } @mbarker_84
CSS .grid__image { grid-column: var(—mediaColStart) / var(—mediaColEnd); grid-row: media; } .grid__body { grid-column: var(—textColStart) / span 5; grid-row: text; } @mbarker_84
CSS .grid__image { grid-column: var(—mediaColStart) / var(—mediaColEnd); } grid-row: media; .grid__body { grid-column: var(—textColStart) / span 5; grid-row: text; } @mbarker_84
CSS .grid__image { grid-column: var(—mediaColStart) / var(—mediaColEnd); grid-row: media; } .grid__body { grid-column: var(—textColStart) / span 5; } @mbarker_84 grid-row: text;
CSS .grid { —mediaColStart: wrapper-start; —mediaColEnd: 14; —textColStart: -8; } .grid—-2 { —mediaColStart: 13; —mediaColEnd: outer-end; —textColStart: 3; } @mbarker_84
codepen.io/michellebarker/pen/yGzWme @mbarker_84
Resources Grid by Example (Rachel Andrew) gridbyexample.com Layout Land (Jen Simmons) layout.land CSS Grid Playground (MDN) mozilladevelopers.github.io/playground/css-grid CSS { In Real Life } css-irl.info
Thank you for listening @mbarker_84 / @CSSInRealLife @mbarker_84
When it comes to crafting layouts on the web, CSS Grid is more powerful than anything we’ve had available to us before. In this talk I’ll walk through an example of harnessing the power of Grid to build complex, responsive, two-dimensional components, and demonstrate how we can use CSS variables to keep our Grid code DRY, reusable and maintainable.
for free. You
can too.