Super-powered Layouts with CSS Grid and CSS Variables

A presentation at Web Dev Conference in October 2018 in Bristol, UK by Michelle Barker

Slide 1

Slide 1

Super-powered Layouts with CSS Grid + CSS Variables

Slide 2

Slide 2

CSS Grid (CSS Grid Layout Module Level 1)

Slide 3

Slide 3

Why not just use flexbox?

Slide 4

Slide 4

Intrinsic Web Design

Slide 5

Slide 5

Grid terminology

Slide 6

Slide 6

Grid display: grid;

Slide 7

Slide 7

Tracks grid-template-rows

Slide 8

Slide 8

Tracks grid-template-columns

Slide 9

Slide 9

Cells

Slide 10

Slide 10

Grid areas

Slide 11

Slide 11

Gutters grid-column-gap

Slide 12

Slide 12

Gutters grid-row-gap

Slide 13

Slide 13

Defining a grid

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

codepen.io/michellebarker/pen/eLZwVg

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

“…represents a fraction of the leftover space in the grid container. Tracks sized with fr units…respond to leftover space similar to how flex items fill space in a flex container.”

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

codepen.io/michellebarker/pen/eLZwVg

Slide 28

Slide 28

Placing items

Slide 29

Slide 29

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

Slide 30

Slide 30

codepen.io/michellebarker/pen/gdrVXP

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

codepen.io/michellebarker/pen/YOqmjP

Slide 34

Slide 34

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

Slide 35

Slide 35

codepen.io/michellebarker/pen/YOqmjP

Slide 36

Slide 36

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

Slide 37

Slide 37

codepen.io/michellebarker/pen/YOqmjP

Slide 38

Slide 38

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

Slide 39

Slide 39

codepen.io/michellebarker/pen/YOqmjP

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

Grid areas header { grid-column: header; } main { grid-column: main grid-row: 2 / 5; } aside { grid-row: span 2; } codepen.io/michellebarker/pen/OobJaa

Slide 47

Slide 47

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 .”; grid-gap: 20px; } codepen.io/michellebarker/pen/OobJqr

Slide 48

Slide 48

grid-template-areas header { grid-area: h; } main { grid-area: m; } aside { grid-area: a; } codepen.io/michellebarker/pen/OobJqr

Slide 49

Slide 49

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

Slide 50

Slide 50

CSS Variables Preprocessor != Variables

Slide 51

Slide 51

CSS Variables

Dynamic variables

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

Defaults .my-component { background-color: var(--bgColor, orange); } .my-component:last-child { --bgColor: red; } codepen.io/michellebarker/pen/MXXQRq

Slide 55

Slide 55

Defaults .box { background-color: var(--bgColor, orange); } .purple { --bgColor: rebeccaPurple; } codepen.io/michellebarker/pen/rKKdBP

Slide 56

Slide 56

Defaults <div class="box"></div> .box { background-color: orange; }

<div class="purple"> <div class="box"></div> </div> .box { background-color: rebeccaPurple; } codepen.io/michellebarker/pen/rKKdBP

Slide 57

Slide 57

CSS Variables + CSS Grid

Slide 58

Slide 58

Managing complex grid declarations

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

minmax() codepen.io/michellebarker/pen/wYGMPQ

Slide 62

Slide 62

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

Slide 63

Slide 63

Managing complex grid declarations :root { --colWidth: 30px; --gutter: 20px; @media (min-width: 1600px) { --colWidth: 50px; —-gutter: 30px; } }

Slide 64

Slide 64

Managing complex grid declarations .grid { display: grid; grid-template-columns: [outer-start] minmax(20px, 1fr) [wrapper-start] repeat(24, minmax(0, var(--colWidth))) [wrapper-end] minmax(20px, 1fr) [outer-end]; grid-template-rows: [outer-start] 1fr [text-top-end] 40px [heading-start] auto [heading-end] 40px [text-bottom-start] 1fr [outer-end]; grid-gap: 0 var(—-gutter); } codepen.io/michellebarker/pen/NzYbVO

Slide 65

Slide 65

Managing component variants

Slide 66

Slide 66

Managing component variants

<article class="grid"> <figure class=“grid__img"></figure> <div class=“grid__text”></div> </article> codepen.io/michellebarker/pen/XBPMZZ

Slide 67

Slide 67

Managing component variants codepen.io/michellebarker/pen/XBPMZZ

Slide 68

Slide 68

Managing component variants .grid { display: grid; grid-template-columns: [start] minmax(20px, 1fr) [wrapper-start] repeat(12, minmax(0, 70px)) [wrapper-end] minmax(20px, 1fr) [end]; grid-gap: 20px; } codepen.io/michellebarker/pen/XBPMZZ

Slide 69

Slide 69

Managing component variants .grid__img { grid-column: wrapper-start / 9; } .grid__text { grid-column: 10 / span 4; } codepen.io/michellebarker/pen/XBPMZZ

Slide 70

Slide 70

Managing component variants codepen.io/michellebarker/pen/XBPMZZ

Slide 71

Slide 71

Managing component variants .grid__img { grid-column: var(—-imgStart, wrapper-start) / var(--imgEnd, 6); grid-row: 1; } .grid__text { grid-column: var(--textStart, 10) / span 4; grid-row: 1; } codepen.io/michellebarker/pen/XBPMZZ

Slide 72

Slide 72

Managing component variants .grid—-a { --textStart: 9; --imgStart: wrapper-start; --imgEnd: end; } .grid—-b { —-textStart: 9; --imgStart: start; } .grid—-c { —-imgEnd: 15; } codepen.io/michellebarker/pen/XBPMZZ

Slide 73

Slide 73

CSS Variables + Javascript

Slide 74

Slide 74

Get property value: getComputedStyle(element).getPropertyValue("--myVariable") (Returns a string) Set property value: element.style.setProperty("--myVariable", 4)

Slide 75

Slide 75

Demo CSS Grid background generator codepen.io/michellebarker/pen/xabrLv

Slide 76

Slide 76

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 77

Slide 77

Is Grid the silver bullet?

Slide 78

Slide 78

Thanks for listening @mbarker_84 / @CSSInRealLife