Super-powered Layouts with CSS Grid and CSS Variables

A presentation at Bristol JS in June 2018 in Bristol, UK by Michelle Barker

Slide 1

Super-powered Layouts with CSS Grid + CSS Variables

Slide 2

CSS Grid
(CSS Grid Layout Module Level 1)

Slide 3

Why not just use flexbox?

Slide 4

Grid terminology

Slide 5

Grid { display: grid; }

Slide 6

Tracks (rows and columns)

Slide 7

Tracks (rows and columns)

Slide 8

Cells

Slide 9

Grid-area

Slide 10

Gutters (grid-column-gap)

Slide 11

Gutters (grid-row-gap)

Slide 12

Defining a grid On the container: .grid {

display : grid ;

grid-template-columns : 200 px

200 px

200 px ;

grid-template-rows : 150 px

150 px

150 px ;

}

bit.ly/2K2gJSe

Slide 13

Defining a grid On the container: .grid {

display : grid ;

grid-template-columns : 200 px

200 px

200 px ;

grid-template-rows : 150 px

150 px

150 px ;

grid-column-gap : 20 px ;

grid-row-gap : 20 px ;

}

bit.ly/2K2gJSe

Slide 14

bit.ly/2K2gJSe

Slide 15

repeat() .grid {

display : grid ;

grid-template-columns : repeat ( 4 , 200 px );

grid-template-rows : repeat ( 4 , 150 px );

grid-gap : 20 px ;

}

bit.ly/2K2gJSe

Slide 16

Shorthand .grid {

display : grid ;

grid-template : repeat ( 4 , 150 px ) / repeat ( 4 , 200 px );

grid-gap : 20 px ;

}

bit.ly/2K2gJSe

Slide 17

Shorthand .grid {

display : grid ;

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

grid-template-rows : 150 px ;

grid-gap : 20 px ;

}

bit.ly/2K2gJSe grid-row-gap / grid-column gap

Slide 18

fr .grid {

display : grid ;

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

grid-template-rows : 150 px ;

grid-gap : 20 px ;

}

bit.ly/2K2gJSe

Slide 19

fr .grid {

display : grid ;

grid-template-columns : repeat ( 3 , 200px ) 1 fr ;

grid-auto-rows : 150 px ;

grid-gap : 20 px ;

}

bit.ly/2K2gJSe

Slide 20

Implicit tracks .grid {

display : grid ;

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

grid-auto-rows : 150 px ;

grid-gap : 20 px ;

}

bit.ly/2K2gJSe

Slide 21

bit.ly/2K2gJSe

Slide 22

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

bit.ly/2K2gJSe

Slide 23

bit.ly/2K2gJSe

Slide 24

Placing items < div

class

"grid"

< header

</ header

< article

</ article

< aside

</ aside

</ div

bit.ly/2K2gJSe

Slide 25

bit.ly/2K2gJSe

Slide 26

Placing items Placing items by grid line header {

grid-column-start : 1 ;

grid-column-end : 5 ;

}

bit.ly/2K2gJSe

Slide 27

bit.ly/2K2gJSe

Slide 28

Placing items

article {

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 ;

}

bit.ly/2K2gJSe

Slide 29

bit.ly/2K2gJSe

Slide 30

Placing items header {

grid-column : 1

5 ;

}

article {

grid-column : 1

4 ;

grid-row : 2

5 ;

}

aside {

// grid-column: 4 / 5; - unnecessary as will be auto- placed

grid-row : span

2 ;

}

bit.ly/2K2gJSe

Slide 31

bit.ly/2K2gJSe

Slide 32

Placing items article {

grid-column : 1

4 ;

grid-row : 2

4 ;

}

bit.ly/2K2gJSe

Slide 33

Placing items article {

grid-column : span 3 ;

grid-row : 2

4 ;

}

bit.ly/2K2gJSe

Slide 34

Placing items article {

grid-column : 1

/ span 3 ;

grid-row : 2

4 ;

}

bit.ly/2K2gJSe

Slide 35

Placing items article {

grid-column : span 3 /

4 ;

grid-row : 2

5 ;

}

bit.ly/2K2gJSe

Slide 36

Grid areas

.grid {

display : grid ;

grid-template-columns : [header

start article

start] repeat ( 3 , 1 fr ) [article

end] 1 fr [header

end];

grid-auto-rows : 150 px ;

}

bit.ly/2K8ji6p

Slide 37

bit.ly/2K2gJSe header-start article-start header-end article-end

Slide 38

Grid areas

header {

grid-column : header ;

}

article {

grid-column : article

grid-row : 2

5 ;

}

aside {

grid-row : span

2 ;

}

bit.ly/2K8ji6p

Slide 39

Grid areas .grid {

display : grid ;

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

grid-auto-rows : 150 px ;

grid-template-areas : "header header header header"

"article article article aside"

"article article article ." ;

grid-gap : 20 px ;

}

bit.ly/2HZMO88

Slide 40

Grid areas header {

grid-area : header ;

}

article {

grid-area : article ;

}

aside {

grid-area : aside ;

}

bit.ly/2HZMO88

Slide 41

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

Slide 42

CSS Variables Preprocessor Variables !=

Slide 43

CSS Variables Dynamic variables

Slide 44

CSS Variables let

Preprocessor Variables

const

Slide 45

:root {

--bgColor : red ;

}

Declaring variables

Slide 46

.my-component {

background-color : var ( --bgColor );

}

Using variables

Slide 47

Defaults bit.ly/2tv5NCD .my-component {

background-color : var ( --bgColor , orange );

}

.my-component:last-child {

--bgColor : red ;

}

Slide 48

Defaults bit.ly/2MllzI3 .box {

background-color : var ( --bgColor , orange );

max-width : 600 px ;

height : 400 px ;

margin : 20 px ;

}

.purple {

--bgColor : rebeccaPurple ;

}

Slide 49

Defaults bit.ly/2MllzI3 < div

class

"purple"

< div

class

"box"

</ div

</ div

.box {

background-color : orange ;

} .box {

background-color : rebeccaPurple ;

} < div

class

"box"

</ div

Slide 50

CSS Variables + CSS Grid

Slide 51

CSS Variables + Grid .grid {

display : grid ;

grid-template-columns :

[outer

start]

minmax ( 20 px , 1 fr )

[wrapper

start]

repeat ( 24 , minmax ( 0 , 30 px ))

[wrapper

end]

minmax ( 20 px , 1 fr )

[outer

end];

grid-template-rows :

[outer

start]

1 fr [text

top

end] 40 px

[heading

start] auto [heading

end]

40 px [text

bottom

start] 1 fr

[outer

end];

grid-gap : 0

20 px ;

}

Slide 52

CSS Variables + Grid :root {

--colWidth : 30px ;

--gutter : 20 px ;

@media ( min-width : 1600px ) {

--colWidth : 50 px ;

—-gutter : 30 px ;

}

Slide 53

CSS Variables + Grid .grid {

display : grid ;

grid-template-columns :

[outer

start]

minmax ( 20 px , 1 fr )

[wrapper

start]

repeat ( 24 , minmax ( 0 , var ( --columnWidth )))

[wrapper

end]

minmax ( 20 px , 1 fr )

[outer

end];

grid-gap : 0

var ( —-gutter ); …

} bit.ly/2Mbmj23

Slide 54

CSS Variables + Grid bit.ly/2MNWaI7 < div

class

"grid"

< div

class

"grid__body"

</ div

< div

class

"grid__media"

</ div

</ div

.grid {

display : grid ;

grid-template-columns :

[ start ] minmax ( 20 px , 1 fr ) [wrapper

start]

repeat ( 12 , minmax ( 0 , 70 px ))

[wrapper

end] minmax ( 20 px , 1 fr ) [ end ];

grid-gap : 20 px ;

}

Slide 55

CSS Variables + Grid bit.ly/2MNWaI7

Slide 56

CSS Variables + Grid bit.ly/2MNWaI7

Slide 57

CSS Variables + Grid .grid__body {

grid-column : var ( --bodyStart , wrapper-start ) /

span

var ( --bodySpan , 4 );

}

.grid__media {

grid-column : var ( --mediaStart , 7 ) /

span

var ( --mediaSpan , 6 );

} bit.ly/2MNWaI7

Slide 58

CSS Variables + Grid .grid:nth-child ( 2 ) {

--bodyStart : 9 ;

--mediaStart : wrapper

start;

}

.grid:nth-child ( 3 ) {

--bodyStart : 9 ;

--mediaStart : start;

}

.grid:nth-child ( 4 ) {

—-mediaSpan : 6 ;

} bit.ly/2MNWaI7

Slide 59

CSS Variables + Javascript

Slide 60

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

Slide 61

Demos Randomly generated grid: bit.ly/2ywpq2H User manipulated grid: bit.ly/2K08rLF

Slide 62

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 63

Thank you for listening! @mbarker_84 / @CSSInRealLife