A presentation at Future Sync in in Plymouth, UK by Michelle Barker
Building Complex Layouts with CSS Grid @mbarker_84
“Intrinsic Web Design” Jen Simmons @mbarker_84
@mbarker_84
@mbarker_84
Why not just use flexbox? @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
Complete control over 2D layout @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 Fraction 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 = fraction units a fraction of the leftover space in the grid container @mbarker_84
CSS Fraction 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 Fraction 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
@mbarker_84 codepen.io/michellebarker/pen/MRrBwa
@mbarker_84 codepen.io/michellebarker/pen/MRrBwa
Placing items by grid line @mbarker_84
@mbarker_84
@mbarker_84 codepen.io/michellebarker/pen/MRrBwa
CSS .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr auto 1fr; gap: 20px; } @mbarker_84 codepen.io/michellebarker/pen/MRrBwa
CSS .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr auto 1fr; } @mbarker_84 gap: 20px; codepen.io/michellebarker/pen/MRrBwa
CSS Placing items by grid line .grid__image { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 5; } @mbarker_84 codepen.io/michellebarker/pen/MRrBwa
CSS Placing items by grid line .grid__heading { grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; } .grid__text { grid-column-start: 4; grid-row-start: 1; } @mbarker_84 codepen.io/michellebarker/pen/YOqmjP
@mbarker_84 codepen.io/michellebarker/pen/MRrBwa
CSS .grid__heading { grid-column: 2 / 4; grid-row: 2; } .grid__image { grid-column: 1 / 3; grid-row: 1 / 4; } .grid__text { grid-column: 4; } @mbarker_84 codepen.io/michellebarker/pen/MRrBwa
CSS .grid__heading { grid-column: 2 / 4; grid-row: 2; } .grid__image { grid-column: 1 / span 2; grid-row: 1 / span 3; } .grid__text { grid-column: 4; } @mbarker_84 codepen.io/michellebarker/pen/MRrBwa
CSS Start line / end line .grid__image { grid-column: 1 / 3; } @mbarker_84 grid-row: 1 / 4;
CSS Start line / span .grid__image { grid-column: 1 / span 2; } @mbarker_84 grid-row: 1 / 4;
CSS Span / end line .grid__image { grid-column: span 2 / 3; } @mbarker_84 grid-row: 1 / 4;
CSS ! Implicit tracks .grid__image { grid-column: 3 / span 3; } @mbarker_84 grid-row: 1 / 4; codepen.io/michellebarker/pen/dLJqLY
@mbarker_84 codepen.io/michellebarker/pen/dLJqLY
grid-auto-columns: 100px; @mbarker_84 codepen.io/michellebarker/pen/dLJqLY
CSS Naming grid lines .grid { display: grid; grid-template-columns: 1fr [heading-start] repeat(2, 1fr) [heading-end] 1fr; grid-template-rows: 1fr [heading-start] auto [heading-end] 1fr; } @mbarker_84 gap: 20px; codepen.io/michellebarker/pen/VNyEeK
heading-start heading-end heading-start heading-end @mbarker_84 codepen.io/michellebarker/pen/VNyEeK
CSS .grid__heading { grid-area: heading; } @mbarker_84 codepen.io/michellebarker/pen/VNyEeK
CSS Naming grid lines .grid { display: grid; grid-template-columns: [image-start] 1fr [heading-start] 1fr [image-end] 1fr [heading-end text-start] 1fr [text-end]; grid-template-rows: [image-start text-start] 1fr [text-end heading-start] auto [heading-end] 1fr [image-end]; gap: 20px; } @mbarker_84 codepen.io/michellebarker/pen/VNyEeK
CSS grid-template-areas .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr auto 1fr; grid-template-areas: } @mbarker_84 “i i . t” “i i . .” “i i . .”; gap: 20px; codepen.io/michellebarker/pen/MRQLrL
CSS .grid__image { grid-area: i; } .grid__text { grid-area: t; } @mbarker_84 codepen.io/michellebarker/pen/VNyEeK
CSS .grid__heading { grid-column: 2 / -2; grid-row: 2; } .grid__image { grid-area: i; } .grid__text { grid-area: t; } @mbarker_84 codepen.io/michellebarker/pen/MRQLrL
CSS .grid__heading { grid-column: 2 / -2; } grid-row: 2; .grid__image { grid-area: i; } .grid__text { grid-area: t; } @mbarker_84 codepen.io/michellebarker/pen/MRQLrL
-5 @mbarker_84 -4 -3 -2 -1 codepen.io/michellebarker/pen/MRQLrL
CSS Alignment .grid__text { grid-area: t; align-self: flex-start; } @mbarker_84 codepen.io/michellebarker/pen/MRQLrL
Alignment @mbarker_84 codepen.io/michellebarker/pen/MRQLrL
align-self: flex-end; @mbarker_84 codepen.io/michellebarker/pen/MRQLrL
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) minmax(auto, 300px) minmax(0, 200px) minmax(0, 1fr) minmax(auto, 300px) minmax(20px, 1fr); @mbarker_84 codepen.io/michellebarker/live/NmzJKv
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 her talk, Michelle will look at ways in which we can harness the power of Grid to build complex, responsive, two-dimensional components, taking advantage of some less familiar properties.
for free. You
can too.