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

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)

.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

Building Challenging Layouts with CSS Grid

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

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

Slide 73