Building Complex Layouts with CSS Grid

Building Complex Layouts with CSS Grid @mbarker_84

“Intrinsic Web Design” Jen Simmons @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

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