Building Challenging Layouts with CSS Grid

Why do we need CSS Grid?

Intrinsic Web Design

Grid terminology

Grid display: grid;

Tracks grid-template-rows

Tracks grid-template-columns

Cells

Grid areas

Gutters column-gap (Formerly grid-column-gap)

Gutters row-gap (Formerly grid-row-gap)

Defining a grid

On the container: .grid { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 150px 150px 150px 150px; } codepen.io/michellebarker/pen/eLZwVg

On the container: .grid { display: grid; grid-template-columns: 200px 200px 200px 200px; grid-template-rows: 150px 150px 150px 150px; column-gap: 20px; row-gap: 20px; } codepen.io/michellebarker/pen/eLZwVg

codepen.io/michellebarker/pen/eLZwVg

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

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

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

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

Fr a fraction of the leftover space in the grid container

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

Flexible units (fr) .grid { display: grid; grid-template-columns: repeat(3, 200px) 1fr; } grid-template-rows: 150px; grid-gap: 20px; codepen.io/michellebarker/pen/wEdjqX

Flexible units (fr) codepen.io/michellebarker/pen/wEdjqX

Implicit / Explicit tracks

Implicit tracks .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; } gap: 20px; codepen.io/michellebarker/pen/eLZwVg

Implicit tracks .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 150px); grid-auto-rows: 150px; } gap: 20px; codepen.io/michellebarker/pen/eLZwVg

codepen.io/michellebarker/pen/eLZwVg

Placing items

Auto placement

<div class="grid"> <div class="grid__item">1</div> <div class="grid__item">2</div> <div class="grid__item">3</div> </div> codepen.io/michellebarker/pen/gdrVXP

codepen.io/michellebarker/pen/gdrVXP

<header> <main> <aside> codepen.io/michellebarker/pen/YOqmjP

Placing items by grid line <div class="grid"> <header></header> <main></main> <aside></aside> </div>

codepen.io/michellebarker/pen/YOqmjP

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

codepen.io/michellebarker/pen/YOqmjP

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

codepen.io/michellebarker/pen/YOqmjP

Placing items by grid line 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; } codepen.io/michellebarker/pen/YOqmjP

codepen.io/michellebarker/pen/YOqmjP

Placing items by grid line Start line / end line main { grid-column: 1 / 4; grid-row: 2 / 4; } codepen.io/michellebarker/pen/YOqmjP

Placing items by grid line Span (with auto-placement) main { grid-column: span 3; grid-row: 2 / 4; } codepen.io/michellebarker/pen/YOqmjP

Placing items by grid line Start line / span main { grid-column: 1 / span 3; grid-row: 2 / 4; } codepen.io/michellebarker/pen/YOQLLZ

Placing items by grid line Span / end line main { grid-column: span 3 / 4; grid-row: 2 / 4; } codepen.io/michellebarker/pen/YOqmjP

Naming lines .grid { display: grid; grid-template-columns: [header-start main-start] repeat(3, 1fr) [main-end] 1fr [header-end]; grid-auto-rows: 150px; } codepen.io/michellebarker/pen/OobJaa

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

Naming lines header { grid-column: header-start / header-end; } main { grid-column: main-start / main-end; grid-row: span 3; }

Naming lines header { grid-column: header; } main { grid-column: main grid-row: span 3; } codepen.io/michellebarker/pen/rqZevv

grid-template-areas .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; grid-template-areas: "h h h h" "m m m a" "m m m a” "m m m a” "m m m .”; gap: 20px; }

grid-template-areas header { grid-area: h; } main { grid-area: m; } aside { grid-area: a; }

CSS Grid for Complex Components A Case Study wbsl.com

<div class="grid"> <h2 class="grid__heading"></h2> <figure class="grid__media"></figure> <div class="grid__body"></div> </div>

Requirements - 24-column grid - 9 variants - Grid items can align with content wrapper, inner columns or outer edge - Heading must be vertically centred - Text can be above or below the heading - Text should align to top/bottom of image unless the content is longer than the available space - Responsive (of course)

Unknowns

  • Image size and/or aspect ratio (could be landscape or portrait) - Length of heading - Length of text

Requirements - 24-column grid - 9 variants - Grid items can align with content wrapper, inner columns or outer edge - Heading must be vertically centred - Text can be above or below the heading (controlled in CMS) - Text should align to top/bottom of image unless the content is longer than the available space - Responsive (of course)

Requirements - 24-column grid - 9 variants - Grid items can align with content wrapper, inner columns or outer edge - Heading must be vertically centred - Text can be above or below the heading (controlled in CMS) - Text should align to top/bottom of image unless the content is longer than the available space - Responsive (of course)

.grid { display: grid; grid-template-columns: repeat(26, 1fr); column-gap: 20px; }

1fr 1fr repeat(24, 60px)

.grid { display: grid; grid-template-columns: 1fr // flexible outer column repeat(24, 60px) // 24 central columns 1fr; // flexible outer column column-gap: 20px; }

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

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

.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; }

Requirements ✓ 24-column grid - 9 variants ✓ Grid items can align with content wrapper, inner columns or outer edge - Heading must be vertically centred

Text can be above or below the heading (controlled in CMS)

Text should align to top/bottom of image unless the content is longer than the available space

Responsive (of course)

.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; }

1fr auto 1fr

.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; }

.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; // Vertically centre our image and heading

.grid { display: 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; gap: 40px 20px; align-items: center; }

Placing items .grid__media { 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; }

.grid { display: 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: auto auto auto; gap: 40px 20px; align-items: center; }

.grid { display: 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: auto 40px auto 40px auto; gap: 0 20px; align-items: center; }

.grid { display: 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: auto 40px auto 40px auto; gap: 0 20px; }

.grid { display: 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 auto 40px auto 40px auto; gap: 0 20px; }

1fr auto 40px auto 40px auto

.grid { display: grid; grid-template-columns: [outer-start] minmax(20px, 1fr) [wrapper-start] repeat(24, minmax(0, 40px)) [wrapper-end] minmax(20px, 1fr) [outer-end]; grid-template-rows: [text-start] 1fr [media-start] auto [text-end] 40px [heading-start] auto [heading-end] 40px auto [media-end]; gap: 0 20px; }

.grid__media { grid-column: wrapper-start / 14; grid-row: media; } .grid__body { grid-column: span 5 / -3; grid-row: text; align-self: flex-start; } .grid__heading { grid-column: 5 / -5; grid-row: heading; }

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

.grid--text-bottom { grid-template-rows: [media-start] auto 40px [heading-start] auto [heading-end] 40px [text-start] auto [media-end] 1fr [text-end]; // hidden row } .grid--text-bottom .grid__body { align-self: flex-end; }

.grid--text-bottom

Variants /* Second variant of our component */ .grid--2 { .grid__media { grid-column: 13 / outer-end; } .grid__body { grid-column: wrapper-start / span 5; } }

Requirements ✓ 24-column grid ✓ 9 variants ✓ Grid items can align with content wrapper, inner columns or outer edge ✓ Heading must be vertically centered ✓ Text can be above or below the heading (controlled in CMS) ✓ Text should align to top/bottom of image unless the content is longer than the available space - Responsive (of course)

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

CSS Variables

Dynamic variables

Defining variables :root { --bgColor: red; }

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

Using variables for item placement .grid__media { grid-column: var(--mediaColStart) / var(--mediaColEnd); grid-row: media; } .grid__body { grid-column: var(--textColStart) / span 5; grid-row: text-top; }

Using variables for item placement .grid { --mediaColStart: wrapper-start; --mediaColEnd: 14; --textColStart: wrapper-end; } .grid—-2 { --mediaColStart: 13; --mediaColEnd: wrapper-end; --textColStart: wrapper-start; }

Requirements ✓ 24-column grid ✓ 9 variants ✓ Grid items can align with content wrapper, inner columns or outer edge ✓ Heading must be vertically centred ✓ Text can be above or below the heading (controlled in CMS) ✓ Text should align to top/bottom of image unless the content is longer than the available space - Responsive (of course)

https://codepen.io/michellebarker/pen/yGzWme

Wrapping up

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