Building Complex Layouts with CSS Grid

A presentation at Future Sync in April 2019 in Plymouth, UK by Michelle Barker

Slide 1

Building Complex Layouts with CSS Grid @mbarker_84

Slide 2

“Intrinsic Web Design” Jen Simmons @mbarker_84

Slide 3

@mbarker_84

Slide 4

@mbarker_84

Slide 5

Why not just use flexbox? @mbarker_84

Slide 6

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

Slide 7

Complete control over 2D layout @mbarker_84

Slide 8

Grid terminology @mbarker_84

Slide 9

Grid terminology Grid display: grid; @mbarker_84

Slide 10

Grid terminology Tracks grid-template-rows @mbarker_84

Slide 11

Grid terminology Tracks grid-template-columns @mbarker_84

Slide 12

Grid terminology Cells @mbarker_84

Slide 13

Grid terminology Grid areas @mbarker_84

Slide 14

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

Slide 15

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

Slide 16

Defining a grid @mbarker_84

Slide 17

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

Slide 18

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

Slide 19

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

Slide 20

@mbarker_84 codepen.io/michellebarker/pen/eLZwVg

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

Fr = fraction units a fraction of the leftover space in the grid container @mbarker_84

Slide 26

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

Slide 27

1fr @mbarker_84 1fr 1fr 2fr

Slide 28

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

Slide 29

200px @mbarker_84 200px 200px 1fr codepen.io/michellebarker/pen/wEdjqX

Slide 30

Implicit vs Explicit tracks @mbarker_84

Slide 31

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

Slide 32

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

Slide 33

@mbarker_84 codepen.io/michellebarker/pen/eLZwVg

Slide 34

Placing items @mbarker_84

Slide 35

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

Slide 36

@mbarker_84 codepen.io/michellebarker/pen/gdrVXP

Slide 37

@mbarker_84 codepen.io/michellebarker/pen/MRrBwa

Slide 38

@mbarker_84 codepen.io/michellebarker/pen/MRrBwa

Slide 39

Placing items by grid line @mbarker_84

Slide 40

@mbarker_84

Slide 41

@mbarker_84 codepen.io/michellebarker/pen/MRrBwa

Slide 42

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

Slide 43

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

Slide 44

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

Slide 45

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

Slide 46

@mbarker_84 codepen.io/michellebarker/pen/MRrBwa

Slide 47

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

Slide 48

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

Slide 49

CSS Start line / end line .grid__image { grid-column: 1 / 3; } @mbarker_84 grid-row: 1 / 4;

Slide 50

CSS Start line / span .grid__image { grid-column: 1 / span 2; } @mbarker_84 grid-row: 1 / 4;

Slide 51

CSS Span / end line .grid__image { grid-column: span 2 / 3; } @mbarker_84 grid-row: 1 / 4;

Slide 52

CSS ! Implicit tracks .grid__image { grid-column: 3 / span 3; } @mbarker_84 grid-row: 1 / 4; codepen.io/michellebarker/pen/dLJqLY

Slide 53

@mbarker_84 codepen.io/michellebarker/pen/dLJqLY

Slide 54

grid-auto-columns: 100px; @mbarker_84 codepen.io/michellebarker/pen/dLJqLY

Slide 55

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

Slide 56

heading-start heading-end heading-start heading-end @mbarker_84 codepen.io/michellebarker/pen/VNyEeK

Slide 57

CSS .grid__heading { grid-area: heading; } @mbarker_84 codepen.io/michellebarker/pen/VNyEeK

Slide 58

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

Slide 59

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

Slide 60

CSS .grid__image { grid-area: i; } .grid__text { grid-area: t; } @mbarker_84 codepen.io/michellebarker/pen/VNyEeK

Slide 61

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

Slide 62

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

Slide 63

-5 @mbarker_84 -4 -3 -2 -1 codepen.io/michellebarker/pen/MRQLrL

Slide 64

CSS Alignment .grid__text { grid-area: t; align-self: flex-start; } @mbarker_84 codepen.io/michellebarker/pen/MRQLrL

Slide 65

Alignment @mbarker_84 codepen.io/michellebarker/pen/MRQLrL

Slide 66

align-self: flex-end; @mbarker_84 codepen.io/michellebarker/pen/MRQLrL

Slide 67

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

Slide 68

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

Slide 69

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

Slide 70

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

Slide 71

Thank you for listening @mbarker_84 / @CSSInRealLife @mbarker_84