Building Intelligent Layouts with CSS Grid @MicheBarks

“Intrinsic Web Design” Jen Simmons @MicheBarks

@MicheBarks

@MicheBarks

@MicheBarks

Why do we need Grid? 2D layout @MicheBarks

Why do we need Grid? Grid systems @MicheBarks

“Flexbox is great for taking a bunch of oddly-sized things and returning the most reasonable layout for those things” Rachel Andrew @MicheBarks

Why do we need Grid? Grid systems @MicheBarks

Why do we need Grid? Grid systems Fewer dependencies @MicheBarks

Why do we need Grid? Complete control @MicheBarks

Grid terminology @MicheBarks

Grid terminology Grid display: grid; @MicheBarks

Grid terminology Tracks grid-template-rows @MicheBarks

Grid terminology Tracks grid-template-columns @MicheBarks

Grid terminology Cells @MicheBarks

Grid terminology Grid areas @MicheBarks

Grid terminology Gutters column-gap (Formerly grid-column-gap) @MicheBarks

Grid terminology Gutters row-gap (Formerly grid-row-gap) @MicheBarks

Defining a grid @MicheBarks

CSS .grid { display: grid; } @MicheBarks codepen.io/michellebarker/pen/eLZwVg

CSS .grid { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 150px 150px 150px 150px; } @MicheBarks 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; } @MicheBarks codepen.io/michellebarker/pen/eLZwVg

@MicheBarks codepen.io/michellebarker/pen/eLZwVg

CSS repeat() .grid { display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: repeat(4, 150px); } @MicheBarks grid-gap: 20px; codepen.io/michellebarker/pen/eLZwVg

CSS Shorthand .grid { display: grid; grid-template: repeat(4, 150px) / repeat(4, 200px); } @MicheBarks codepen.io/michellebarker/pen/eLZwVg

CSS Shorthand .grid { display: grid; grid-template: repeat(4, 150px) / repeat(4, 200px); gap: 20px; // row-gap / column-gap } @MicheBarks codepen.io/michellebarker/pen/eLZwVg

CSS Fraction units (fr) .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @MicheBarks 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 @MicheBarks

CSS Fraction units (fr) .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @MicheBarks grid-template-rows: repeat(4, 150px); gap: 20px; codepen.io/michellebarker/pen/eLZwVg

grid-template-columns: repeat(3, 1fr) 2fr; 1fr @MicheBarks 1fr 1fr 2fr

CSS Fraction units (fr) .grid { display: grid; grid-template-columns: repeat(3, 200px) 1fr; } @MicheBarks grid-template-rows: repeat(4, 150px); gap: 20px;

200px @MicheBarks 200px 200px 1fr

Implicit vs Explicit tracks @MicheBarks

CSS Implicit tracks .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; } @MicheBarks 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; } @MicheBarks gap: 20px; codepen.io/michellebarker/pen/eLZwVg

@MicheBarks codepen.io/michellebarker/pen/eLZwVg

Placing items @MicheBarks

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> @MicheBarks codepen.io/michellebarker/pen/gdrVXP

@MicheBarks codepen.io/michellebarker/pen/gdrVXP

HTML Placing items by grid line <div class=”grid”> <header></header> <main></main> <aside></aside> </div> @MicheBarks

@MicheBarks codepen.io/michellebarker/pen/YOqmjP

CSS Placing items by grid line header { grid-column-start: 1; grid-column-end: 5; } @MicheBarks codepen.io/michellebarker/pen/YOqmjP

@MicheBarks 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; } @MicheBarks codepen.io/michellebarker/pen/YOqmjP

@MicheBarks 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; } @MicheBarks codepen.io/michellebarker/pen/YOqmjP

@MicheBarks codepen.io/michellebarker/pen/YOqmjP

CSS Start line / end line main { grid-column: 1 / 4; grid-row: 2 / 4; } @MicheBarks codepen.io/michellebarker/pen/YOqmjP

CSS Span (with auto-placement) main { grid-column: span 3; grid-row: 2 / 4; } @MicheBarks codepen.io/michellebarker/pen/YOqmjP

CSS Start line / span main { grid-column: 1 / span 3; grid-row: 2 / 4; } @MicheBarks codepen.io/michellebarker/pen/YOQLLZ

CSS Span / end line main { grid-column: span 3 / 4; grid-row: 2 / 4; } @MicheBarks 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; } @MicheBarks codepen.io/michellebarker/pen/OobJaa

header-start main-start @MicheBarks main-end header-end codepen.io/michellebarker/pen/OobJaa

CSS header { grid-column: header; } main { grid-column: main; grid-row: span 3; } @MicheBarks 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; } @MicheBarks “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; } @MicheBarks

Building a Complex Component A Case Study @MicheBarks

@MicheBarks

@MicheBarks

@MicheBarks

@MicheBarks

HTML

Some rules @MicheBarks

Dynamic content @MicheBarks

The heading must always be vertically centred over the image @MicheBarks

The heading must always be vertically centred over the image …no matter the size of the image or the text @MicheBarks

Text block must align to the top of the image @MicheBarks

Text block must align to the top of the image …unless the text is too long @MicheBarks

Space must always be maintained between the text block and heading @MicheBarks

Context-aware @MicheBarks

CSS Grid 2D Layout @MicheBarks

@MicheBarks

@MicheBarks

@MicheBarks

@MicheBarks

grid-template-columns: repeat(26, 1fr); @MicheBarks

grid-template-columns: repeat(26, 1fr); @MicheBarks

1fr @MicheBarks repeat(24, 60px) 1fr

grid-template-columns: 1fr repeat(24, 60px) 1fr; @MicheBarks

minmax() minmax(20px, 1fr) Minimum size @MicheBarks Maximum size

minmax(20px, 1fr) minmax(0, 60px) @MicheBarks codepen.io/michellebarker/pen/wYGMPQ

grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); @MicheBarks

grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); @MicheBarks

grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); @MicheBarks

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; } @MicheBarks

grid-template-rows: 1fr auto 1fr; @MicheBarks

CSS .grid { display: grid; grid-template-columns: minmax(20px, 1fr) repeat(24, minmax(0, 60px)) minmax(20px, 1fr); grid-template-rows: 1fr auto 1fr; } @MicheBarks 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; } @MicheBarks

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; … } @MicheBarks

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; … } @MicheBarks

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; … } @MicheBarks

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; } @MicheBarks

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; } @MicheBarks 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; } @MicheBarks

@MicheBarks

@MicheBarks

I didn’t solve this problem @MicheBarks

Gutter rows @MicheBarks

Secret hidden row @MicheBarks

grid-template-rows: 1fr auto 40px auto 40px auto; @MicheBarks

grid-template-rows: 1fr auto 40px auto 40px auto; @MicheBarks

@MicheBarks

@MicheBarks

CSS .grid { … grid-template-rows: [text-start] 1fr auto [text-end] 40px // gap [heading-start] auto [heading-start] 40px // gap auto; … } @MicheBarks

.grid__body { grid-row: text; } @MicheBarks

@MicheBarks

grid-template-rows: auto 40px auto 40px auto 1fr; Secret hidden row @MicheBarks

CSS .grid—text-bottom { grid-template-rows: auto 40px [heading-start] auto [heading-end] 40px [text-start] auto 1fr [text-end]; // hidden row } @MicheBarks

CSS .grid—text-bottom .grid__body { align-self: flex-end; } @MicheBarks

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; } @MicheBarks @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; } } @MicheBarks

CSS Variables (a.k.a. Custom Properties) @MicheBarks

CSS Variables @MicheBarks

Dynamic variables

CSS Defining variables :root { —bgColor: red; } @MicheBarks

CSS Using variables .my-component { background-color: var(—bgColor); } @MicheBarks

CSS .grid__image { grid-column: var(—imageColStart) / var(—-imageColEnd); grid-row: media; } .grid__body { grid-column: var(—textColStart) / span 5; grid-row: text; } @MicheBarks

CSS .grid__image { grid-column: var(—imageColStart) / var(—imageColEnd); } grid-row: media; .grid__body { grid-column: var(—textColStart) / span 5; grid-row: text; } @MicheBarks

CSS .grid__image { grid-column: var(—mediaColStart) / var(—mediaColEnd); grid-row: media; } .grid__body { grid-column: var(—textColStart) / span 5; } @MicheBarks grid-row: text;

CSS .grid { —imageColStart: wrapper-start; —imageColEnd: 14; —textColStart: -8; } .grid—-2 { —imageColStart: 13; —imageColEnd: outer-end; —textColStart: 3; } @MicheBarks

codepen.io/michellebarker/pen/yGzWme @MicheBarks

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 @MicheBarks

Thank you for listening @MicheBarks / @CSSInRealLife