Super-powered Layouts with CSS Grid and CSS Variables

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

Super-powered Layouts with CSS Grid + CSS Variables

CSS Grid
(CSS Grid Layout Module Level 1)

Defining a grid On the container: .grid {
display : grid ;
grid-template-columns : 200 px
200 px
200 px
200 px ;
grid-template-rows : 150 px
150 px
150 px
150 px ;
}
bit.ly/2K2gJSe

Defining a grid On the container: .grid {
display : grid ;
grid-template-columns : 200 px
200 px
200 px
200 px ;
grid-template-rows : 150 px
150 px
150 px
150 px ;
grid-column-gap : 20 px ;
grid-row-gap : 20 px ;
}
bit.ly/2K2gJSe

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

Shorthand .grid {
display : grid ;
grid-template : repeat ( 4 , 150 px ) / repeat ( 4 , 200 px );
grid-gap : 20 px ;
}
bit.ly/2K2gJSe

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

`fr` .grid {
display : grid ;
grid-template-columns : repeat ( 4 , 1 fr );
grid-template-rows : 150 px ;
grid-gap : 20 px ;
}
bit.ly/2K2gJSe

`fr` .grid {
display : grid ;
grid-template-columns : repeat ( 3 , 200px ) 1 fr ;
grid-auto-rows : 150 px ;
grid-gap : 20 px ;
}
bit.ly/2K2gJSe

Implicit tracks .grid {
display : grid ;
grid-template-columns : repeat ( 4 , 1 fr );
grid-auto-rows : 150 px ;
grid-gap : 20 px ;
}
bit.ly/2K2gJSe

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

Placing items < div
class
"grid"
< header
</ header
< article
</ article
< aside
</ aside
</ div
bit.ly/2K2gJSe

Placing items Placing items by grid line header {
grid-column-start : 1 ;
grid-column-end : 5 ;
}
bit.ly/2K2gJSe

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

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

Placing items article {
grid-column : 1
/
4 ;
grid-row : 2
/
4 ;
}
bit.ly/2K2gJSe

Placing items article {
grid-column : span 3 ;
grid-row : 2
/
4 ;
}
bit.ly/2K2gJSe

Placing items article {
grid-column : 1
/ span 3 ;
grid-row : 2
/
4 ;
}
bit.ly/2K2gJSe

Placing items article {
grid-column : span 3 /
4 ;
grid-row : 2
/
5 ;
}
bit.ly/2K2gJSe

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

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

Grid areas
header {
grid-column : header ;
}
article {
grid-column : article
grid-row : 2
/
5 ;
}
aside {
grid-row : span
2 ;
}
bit.ly/2K8ji6p

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 aside"
"article article article aside"
                         "article article article ." ;
grid-gap : 20 px ;
}
bit.ly/2HZMO88

Grid areas header {
grid-area : header ;
}
article {
grid-area : article ;
}
aside {
grid-area : aside ;
}
bit.ly/2HZMO88

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

CSS Variables let
Preprocessor Variables
const

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

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

Defaults bit.ly/2tv5NCD .my-component {
background-color : var ( --bgColor , orange );
}
.my-component:last-child {
--bgColor : red ;
}

Defaults bit.ly/2MllzI3 .box {
   background-color : var ( --bgColor , orange );
   max-width : 600 px ;
   height : 400 px ;
   margin : 20 px ;
}
.purple {
   --bgColor : rebeccaPurple ;
}

Defaults bit.ly/2MllzI3 < div
class
"purple"
< div
class
"box"
</ div
</ div
.box {
background-color : orange ;
} .box {
background-color : rebeccaPurple ;
} < div
class
"box"
</ div

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 ;
}

CSS Variables + Grid :root {
--colWidth : 30px ;
--gutter : 20 px ;
@media ( min-width : 1600px ) {
--colWidth : 50 px ;
—-gutter : 30 px ;
}
}

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

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 ;
}

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

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

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

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

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

Michelle Barker
@mbarker84

1 / 63

The CSS Grid Layout specification has revolutionised layout on the web and has made things possible that were never possible before. This talk will provide an overview of the various methods for building layouts with CSS Grid and demonstrate how it can help us construct complex components. We’ll look at how CSS Variables (custom properties) can bring even more power to our CSS, giving us finer control over our responsive grids, and DRYer and more maintainable code, as well as exploring how these dynamic variables can be changed in CSS and Javascript to afford some exciting possibilities.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Codepen Collection

A collection of Codepen demos related to this talk

Super-powered Layouts with CSS Grid and CSS Variables

class

class

class

class

class

grid-template-columns : [header

start article

start] repeat ( 3 , 1 fr ) [article

end] 1 fr [header

CSS Variables Dynamic variables

CSS Variables let

Preprocessor Variables

class

class

class

1 fr [text

top

start] auto [heading

40 px [text

bottom

class

class

class

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

--mediaStart : wrapper

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

Codepen Collection