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

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

Flexible units (fr) 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

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-start / header-end; } main { grid-column: main-start / main-end; grid-row: span 3; } @mbarker_84

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

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

@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

CSS Variables @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