When Grids Go Wrong: Debugging CSS Grid

A presentation at State Of The Browser in September 2019 in London, UK by Michelle Barker

Slide 1

Slide 1

When Grids Go Wrong (Debugging CSS Grid) @MicheBarks

Slide 2

Slide 2

@MicheBarks

Slide 3

Slide 3

• • • @MicheBarks Front End Developer at Ordoo Mozilla Tech Speaker Author of CSS { In Real Life }

Slide 4

Slide 4

.sidebar { float: left; width: 200px; } .clearfix { overflow: auto; } .clearfix::after { content: ”; clear: both; display: table; } @MicheBarks

Slide 5

Slide 5

CSS Grid @MicheBarks

Slide 6

Slide 6

CSS Grid @MicheBarks +

Slide 7

Slide 7

Scaffolding (building the grid) @MicheBarks

Slide 8

Slide 8

.grid { display: grid; grid-template-rows: repeat(4, 8rem); grid-template-columns: repeat(4, 12rem); gap: 1rem; } @MicheBarks

Slide 9

Slide 9

@MicheBarks

Slide 10

Slide 10

Slide 11

Slide 11

Placing items .image { grid-row: 1 / 3; grid-column: 1 / 4; } @MicheBarks

Slide 12

Slide 12

Placing items .image { grid-row: 1 / span 2; grid-column: 1 / span 3; } @MicheBarks

Slide 13

Slide 13

Placing items .image { grid-row: span 2 / 3; grid-column: span 3 / 4; } @MicheBarks

Slide 14

Slide 14

Placing items .image { grid-row: span 2; grid-column: span 3; } @MicheBarks

Slide 15

Slide 15

Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; } grid-template-columns: repeat(4, 12rem); gap: 1rem; .image { grid-row: image; grid-column: 1 / 4; } @MicheBarks

Slide 16

Slide 16

Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: repeat(4, 12rem); gap: 1rem; } .image { grid-row: image; grid-column: 1 / 4; } @MicheBarks

Slide 17

Slide 17

Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: [image-start] 12rem 12rem 12rem [image-end] 12rem; } gap: 1rem; .image { grid-area: image; } @MicheBarks

Slide 18

Slide 18

image-start image-start image-end @MicheBarks image-end

Slide 19

Slide 19

image-start image-end image-start image image-end @MicheBarks

Slide 20

Slide 20

Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: [image-start] 12rem 12rem 12rem [image-end] 12rem; gap: 1rem; } .image { grid-area: image; } @MicheBarks

Slide 21

Slide 21

Placing items .a { grid-area: 1 / 1 / 3 / 4; } /* grid-row-start / grid-column-start / grid-row-end / grid-column-end */ @MicheBarks

Slide 22

Slide 22

Placing items .grid { display: grid; grid-template-rows: repeat(4, 8rem); grid-template-columns: repeat(4, 12rem); grid-template-areas: ‘i i i .’ ‘i i i .’ ‘… .’ ‘… .’; } @MicheBarks gap: 1rem;

Slide 23

Slide 23

A B @MicheBarks

Slide 24

Slide 24

Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: [image-start] 12rem 12rem 12rem [image-end] 12rem; } @MicheBarks grid-template-areas: ‘… .’ ‘. . text text’ ‘. . text text’ ‘. . text text’; gap: 1rem;

Slide 25

Slide 25

Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: [image-start] 12rem 12rem 12rem [image-end] 12rem; grid-template-areas: ‘… .’ ‘. . text text’ ‘. . text text’ ‘. . text text’; } @MicheBarks gap: 1rem;

Slide 26

Slide 26

Slide 27

Slide 27

Auto placement grid-template-rows: repeat(3, 10rem); @MicheBarks

Slide 28

Slide 28

grid-auto-rows: 10rem; Implicit track @MicheBarks

Slide 29

Slide 29

Accidental implicit tracks @MicheBarks

Slide 30

Slide 30

grid-column: 3 / span 2; @MicheBarks

Slide 31

Slide 31

grid-column: 3 / span 3; @MicheBarks

Slide 32

Slide 32

grid-column: 3 / span 3; @MicheBarks

Slide 33

Slide 33

@MicheBarks

Slide 34

Slide 34

.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: span 4; grid-row: 1 / span 2; } .text { grid-column: span 4; grid-row: 2 / span 2; } @MicheBarks

Slide 35

Slide 35

.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: span 4; grid-row: 1 / span 2; } .text { grid-column: span 4; grid-row: 2 / span 2; } @MicheBarks

Slide 36

Slide 36

.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: span 4; grid-row: 1 / span 2; } .text { grid-column: span 4; grid-row: 2 / span 2; } @MicheBarks

Slide 37

Slide 37

@MicheBarks

Slide 38

Slide 38

@MicheBarks

Slide 39

Slide 39

.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: span 4; grid-row: 1 / span 2; } .text { grid-column: span 4; grid-row: 2 / span 2; } @MicheBarks

Slide 40

Slide 40

.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: 1 / span 4; grid-row: 1 / span 2; } .text { grid-column: 1 / span 4; grid-row: 2 / span 2; } @MicheBarks

Slide 41

Slide 41

.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: 1 / -1; grid-row: 1 / span 2; } .text { grid-column: 1 / -1; grid-row: 2 / span 2; } @MicheBarks

Slide 42

Slide 42

1 @MicheBarks -1

Slide 43

Slide 43

-4 -3 -2 -1 @MicheBarks

Slide 44

Slide 44

Equal-width columns @MicheBarks

Slide 45

Slide 45

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } @MicheBarks

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

@MicheBarks

Slide 51

Slide 51

Extrinsic sizing Context-based @MicheBarks

Slide 52

Slide 52

Intrinsic sizing Content-based @MicheBarks

Slide 53

Slide 53

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

Slide 54

Slide 54

@MicheBarks

Slide 55

Slide 55

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

Slide 56

Slide 56

grid-template-columns: repeat(4, minmax(0, 1fr)); @MicheBarks

Slide 57

Slide 57

Slide 58

Slide 58

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

Slide 59

Slide 59

grid-template-columns: repeat(4, 0.5fr); @MicheBarks

Slide 60

Slide 60

grid-template-columns: repeat(4, 0.2fr); @MicheBarks

Slide 61

Slide 61

Grids without media queries? @MicheBarks

Slide 62

Slide 62

.auto-fill { grid-template-columns: repeat(auto-fill, 18rem); } .auto-fit { grid-template-columns: repeat(auto-fit, 18rem); } @MicheBarks

Slide 63

Slide 63

@MicheBarks

Slide 64

Slide 64

.auto-fill { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } .auto-fit { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } @MicheBarks

Slide 65

Slide 65

@MicheBarks

Slide 66

Slide 66

@MicheBarks

Slide 67

Slide 67

Auto-fill Fill the grid with items @MicheBarks

Slide 68

Slide 68

Auto-fit Fit the items into the grid @MicheBarks

Slide 69

Slide 69

@MicheBarks

Slide 70

Slide 70

grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); @MicheBarks

Slide 71

Slide 71

@MicheBarks

Slide 72

Slide 72

:root { —outerPad: 1rem; —gridPad: 1rem; } .item { —totalOuterPad: calc(2 * var(—outerPad)); —totalGridPad: calc(2 * var(—gridPad)); —totalPad: calc(var(—totalOuterPad) + var(—totalGridPad)); } @MicheBarks max-width: calc(100vw - var(—totalPad)); https://codepen.io/michellebarker/pen/RwbQGvJ

Slide 73

Slide 73

Alignment between Grid items @MicheBarks

Slide 74

Slide 74

Align-items Align-content Justify-items Justify-content Align-self Justify-self @MicheBarks

Slide 75

Slide 75

@MicheBarks

Slide 76

Slide 76

align-items: center; @MicheBarks

Slide 77

Slide 77

display: grid; display: flex; @MicheBarks

Slide 78

Slide 78

@MicheBarks

Slide 79

Slide 79

@MicheBarks

Slide 80

Slide 80

@MicheBarks

Slide 81

Slide 81

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .item { grid-row: span 3; display: grid; grid-template-rows: subgrid; } @MicheBarks

Slide 82

Slide 82

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .item { grid-row: span 3; display: grid; grid-template-rows: subgrid; } @MicheBarks

Slide 83

Slide 83

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .item { grid-row: span 3; display: grid; grid-template-rows: subgrid; } @MicheBarks

Slide 84

Slide 84

When not to use Grid @MicheBarks

Slide 85

Slide 85

⚠ Tables @MicheBarks

Slide 86

Slide 86

❌ table { display: grid; } @MicheBarks

Slide 87

Slide 87

❌ tr { display: grid; } @MicheBarks

Slide 88

Slide 88

⚠ When you don’t want items to align in rows or columns @MicheBarks

Slide 89

Slide 89

Flexbox @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv

Slide 90

Slide 90

Flexbox @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv

Slide 91

Slide 91

Flexbox @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv

Slide 92

Slide 92

Grid @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv

Slide 93

Slide 93

Grid @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv

Slide 94

Slide 94

⚠ When your fallback layout takes twice as long @MicheBarks

Slide 95

Slide 95

This won’t work in IE11 .grid { display: grid; grid-template-columns: repeat(3, 1fr); } @supports not (display: grid) { .grid { display: flex; flex-wrap: wrap; } } @MicheBarks

Slide 96

Slide 96

This will work .grid { display: flex; flex-wrap: wrap; } @supports (display: grid) { .grid { display: grid; grid-template-columns: repeat(3, 1fr); } } @MicheBarks

Slide 97

Slide 97

CSS { In Real Life } css-irl.info @MicheBarks / @CSSInRealLife @MicheBarks