How CSS Grid
Changes Everything(in 15 mins?)

W3C Developer Meetup@jenSimmons

Follow@jensimmonsfor slides

Layout on the Webphoto by Brad Frost, 2012, CC BY 2.0The Official Timeline of Web Page Layout

TheNo-Layout
LayoutTable -based
Layouts

Hand -c oded
F loat Layouts

F rame wor k
Layouts

gnizamA!
erutu
FCSS Grid
Flexbox
Alignment
Writing Modes
Multicolumn
Viewport Units
Transforms
Object Fit
Clip-path
Masking
Shape-outside
Initial-letterFlow
FloatsBlockInline
Inline-block
Display:table
MarginNegative margins
Padding
everything else
in CSSThis new CSS
changes everything
in web layout.

labs.jensimmons.com

Grid makes itmuch easier to implement
the same old layouts.

Grid makes it possible
to do layouts that werenot possible before.

Nature ofCSS Grid

explicit vs. implicit

You define!e size and/or
number of rows
and/orcolumns

Let !e browser
define number orsize of rows
or columns

Place each "eminto a specificcell or area

Let !e browser
place each"em using
auto-placement
algor"hmRows *and* Columns

ROWS!!!!!!!!!!!

Tracks don’t have to all
be the same size.

Content sized by
the size of a track.

Tracks sized by
the size of content.

fixedportion ofavailable
space —
2 parts

portion ofavailable
space —
1 partset bycontent sizeGrid CodeGrid ContainerGrid Items

<body><header>…</header><main><article>
<h1>
<p>
<p>
<p>
<figure><p></article></main><aside>…</aside><footer>…</footer></body>body {display: grid;}

<body><header>…</header><main><article>
<h1>
<p>
<p>
<p>
<figure><p></article></main><aside>…</aside><footer>…</footer></body>body {
display: grid;}

article {display: grid;}

<body><header>…</header><main><article>
<h1>
<p>
<p>
<p>
<figure><p></article></main><aside>…</aside><footer>…</footer></body>body {
display: grid;}main {
display: subgrid;}
article {display: subgrid;}

<body><header>…</header><main><article>
<h1>
<p>
<p>
<p>
<figure><p></article></main><aside>…</aside><footer>…</footer></body>body {display: grid;}

article {display: grid;}

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.

Headline Here
This is teaser text. It
comes in different lengths.
Here we see more content
filling the box up all the way.

This Headline
This is teaser text. It
comes in different lengths.

Headline

Headline
This is teaser text.

Headline That isLonger & Wraps
This is teaser text. It
comes in different lengths.

labs.jensimmons.com

Container

Item

Item

Item

Terminology

Grid ContainerGrid Items

Grid Line
Grid Track
Grid Line

Grid Track

Grid Cell
Grid Line

Grid Area

Grid Line

Grid LineGrid Line
Grid Track
Grid Gap

Grid Gap

Grid Track

Grid Gap

Grid Line

Grid Line

Grid Line

Grid Line

4 Examples

labs.jensimmons.com/2017/01-003.html

<ul><li><img src="/file1.jpg" ></li><li><img src="/file2.jpg" ></li><li><img src="/file3.jpg" ></li><li><img src="/file4.jpg" ></li><li><img src="/file5.jpg" ></li><li><img src="/file6.jpg" ></li><li><img src="/file7.jpg" ></li>
</ul>

ul {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 4px;}li {// nothing}ul {display: grid;
grid-template-columns:repeat(4, 100px);
grid-gap: 4px;}
li {// nothing}ul {display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 4px;
}
/*
or
*/
ul {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 4px;}

ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 0.25em;
}
/*

or

*/

ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0.25em;}

ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-gap: 0.25rem;}nightly.mozilla.org

ul {display: grid;
grid-template-columns:repeat(4, 1fr);}

li:nth-child(1) {grid-column: 2 / 3;
grid-row: 1 / 2;}

li:nth-child(1) {grid-column: 2 / 3;
grid-row: 1 / 2;}
li:nth-child(2) {grid-column: 4 / 5;
grid-row: 2 / 3;}
li:nth-child(3) {grid-column: 3 / 4;
grid-row: 3 / 4;}
li:nth-child(4) {…}li:nth-child(5) {…}‘fr ’ unit

.grid-container {display: grid;
grid-template-columns: 1fr 1fr 1fr;}

some other syntax options (each with different results)
grid-template-columns: 1fr 5fr 2.5fr;
grid-template-columns: 8em 1fr 300px;
grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 21fr 34fr;
grid-template-columns: repeat(7, 1fr);
grid-template-columns: repeat(3, 200px 1fr 25%);
grid-template-columns: repeat(auto-fill, 10rem);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: 4rem 2fr repeat(5, 1fr) 300px;

px

pixels60px

em(or rem)

10em%

percents20%

min-content
max-content
frminmax()fr unit = “fraction”

100%

33%

33%

33%

100%

33.33333%

33.33333%

33.33333%

100%

33.33333%

33.33333%

33.33333%

100%

2%
33%

2%
33%

33%

100%

2%
32%

2%
32%

100% – 4% = 96% = 32%
3
332%

100%

3%
31.333%

3%
31.333%31.333%

100% – 6% = 94% = 31.333%
3
3

100%

2.5%
31.666%

2.5%
31.666%31.666%

100% – 5% = 95% = 31.666666666666666%
3
3

100%

2em

2em

x%
x%
x%
@media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}@media (min-width: 600px) { .box { width: calc(100-(2*2em)/3)%;}calc(100-(2*2em)/3)%;}}@media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}}

100%

2em
1fr

2em
1fr

1fr

2em
1fr

2em
1fr

1fr

1fr + 1fr + 1fr = 3fr total
therefore, 1fr = 1/3 of the space

2em
1fr

2em
1fr

2em
1fr

1fr

1fr + 1fr + 1fr + 1fr = 4fr total
therefore, now 1fr = 1/4 of the space

100px

100px

1fr

1fr

1fr

1fr

50px

2fr

1fr

1fr

min-content

1fr

6fr

2.4fr

2.4fr

2fr

What about old browsers?

6

You must support
browsers that
do not understand
CSS Grid.

@supports (foo: value) {// some CSS code here}

// code for non-Grid browsers@supports (display: grid) {// undo some of the above// then do your Grid layout}hacks.mozilla.org/2016/08/using-feature-queries-in-css

6You have two choices forInternet Explorer (& old Edge):1) Leverage the 2012 Grid
implementation.
2) Pretend IE has no Grid.

You have two choices forInternet Explorer (& old Edge):1) Use old -ms-* syntax.
2) Or don’t.

display: grid;
grid-template-columns: repeat(4, 100px);
display: -ms-grid;-ms-grid-columns: (100px)[4];Autoprefixer

rachelandrew.co.uk/archives/2016/11/26/should-i-tryto-use-the-ie-implementation-of-css-grid-layoutFor more…

jensimmons.com/post/feb-27-2017/learn-css-griddeveloper.mozilla.org/docs/Web/CSS/CSS_Grid_Layout

2016

2015
Modern Layouts:
Getting Out of Our Ruts

Revolutionize Your Page:
Real Art Direction on the Web

available on jensimmons.com

Thanks!

jensimmons.com@jensimmonslayout.land

labs.jensimmons.com