Super-powered Layouts with CSS Grid and CSS Variables

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

Super-powered Layouts with CSS Grid + CSS Variables

CSS Grid (CSS Grid Layout Module Level 1)

Gutters .grid { grid-column-gap: 20px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Variables
Preprocessor = Variables let const

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks for listening @mbarker_84 / @CSSInRealLife

Michelle Barker
@mbarker84

1 / 71

CSS Grid Layout has the ability to transform the way we build layouts on the web and has made things possible that were never possible before. I’ll provide an overview of the various methods for building layouts with CSS Grid and demonstrate how it can help us construct complex components.

I’ll discuss how CSS Variables (custom properties) can bring even more power to our CSS and give us finer control over our responsive grids, and 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 demos

A collection of the CSS Grid demos referenced in this presentation

Super-powered Layouts with CSS Grid and CSS Variables

CSS Variables

CSS Variables

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

Codepen demos