1.
CSS GRID
CHANGES
EVERYTHING
(SHIFTING THE WEB LAYOUT PARADIGM)
Morten Rand-Hendriksen | @mor10 | WebCamp Zagreb 2017

2.
mor10.com/wczg2017
SLIDES, LINKS, ETC:
@mor10 #CSSGrid #WCZG

3.
Paradigm Shift

4.
Desire Path

5.
Pave the cowpath
To formalize an existing de-facto practice.

6.
Desire Path:
A Short History
of Web Design

7.
1990
Tim Berners-Lee publishes
first ever web page.

8.
1990
Web
as
text
period

9.
Web
as
text
period
1990
Håkon Wium Lie proposes
Cascading Style Sheets
1994

10.
1990
Web
as
text
period
1994
DarkAges

11.
Web
as
text
period
DarkAges
1990
Lynda Weinman publishes
Designing with Web Graphics
1996

12.
1990 1996
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
Web
as
text
period
1994
DarkAges

13.
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
Web
as
text
period
DarkAges
1990
Jeffrey Zeldman publishes
Designing with Web Standards
20031996

14.
1990 20031996
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
1994
DarkAges
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”

15.
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
DarkAges
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
1990 20031996 2012
Microsoft releases
Windows 8

16.
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
DarkAges
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
1990 20031996 2012
Microsoft proposes
CSS Grid Layout

17.
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
DarkAges
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
1990 20031996 2015
display: flex;
2012

18.
1990 20031996 2015
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
1994
DarkAges
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
UncertaintyPeriod

19.
meanwhile…

20.
Rachel Andrew
@rachelandrew
Jen Simmons
@jensimmons

21.
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
DarkAges
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
UncertaintyPeriod
1990 201720031996 2015
display: grid;
2012

22.
1990 20031996 2015
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
1994
DarkAges
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
UncertaintyPeriod
2017
Web
as
Layout
Surface

23.
Pave the cowpath
To formalize an existing de-facto practice.

24.
Person behind you
What did I just watch?!?!

25.
https://codepen.io/mor10/full/JrpRyv/

26.
CSS Grid
makes the impossible possible

27.
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummary--hero"></div>
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>
</div>
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>

28.
2
3
4
8
9
10
5
6
7
1

29.
2
3
4
8
9
10
5
6
7
1

30.
2
3
4
1

31.
2
3
4
8
9
10
5
6
7
1

32.
10 10
2
3
4
8
9
10
5
6
7
1
11
12
14
15

33.
11 1312
10
14
9
10
2 3
4
8
5
6 7
1
15

34.
Since the beginning of (web) time,
web layouts have been broken.
We’ve just refined
how we break them.

35.
.main-content .sidebar
.container

36.
.main-content
.sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
background: blue;
}
.sidebar {
background: green;
}

37.
.main-content .sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
width: 45%;
float: left;
background: blue;
}
.sidebar {
width: 45%;
float: right;
background: green;
}

38.
.main-content .sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
width: 45%;
float: left;
background: blue;
}
.sidebar {
width: 45%;
float: right;
background: green;
}
/* Clearfix */
.wrap:after {
content: "";
display: table;
clear: both;
}

39.
.main-content .sidebar
.wrap.wrap {
display: flex;
justify-content:
space-between;
border: 5px solid red;
}
.main-content {
width: 45%;
background: blue;
}
.sidebar {
width: 45%;
background: green;
}

40.
.main-content .sidebar
.wrap
.other-content

41.
.main-content .sidebar
.wrap
.other-content
.container

42.
.main-content .sidebar
.wrap.wrap {
display: flex;
justify-content:
space-between;
border: 5px solid red;
}
.container {
width: 45%;
}
.main-content {
background: blue;
}
.other-content {
background: purple;
}
.sidebar {
width: 45%;
background: green;
}
.container
.other-content

43.
This is a hack.
float and flex force us
to create HTML clutter in
the form of wrappers
like the .container
element in this example.
.main-content .sidebar
.wrap
.container
.other-content

44.
This is web
layouts today.
float and flex have
been the two only
options for creating
horizontal layouts
resulting in the web
suffering from a severe
case of Divitis.
.main-content .sidebar
.wrap
.container
.other-content

45.
http://getbootstrap.com/css/

46.
Paal Joachim Romdahl on Advanced WordPress Group

47.
Me, every time I build a new site
What if
we didn’t have to do this
any more…

48.
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummary--hero"></div>
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>
</div>
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>

49.
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummary--hero"></div>
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>
</div>
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>

50.
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummary--hero"></div>
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>
</div>
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>
<div class="MomentsCapsuleSummaryGroup-list">
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>

51.
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummary--hero"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
<div class="MomentsCapsuleSummary--portrait"></div>
</div>

52.
<ul class="MomentsGuidePage-capsules">
<li class="MomentsCapsuleSummary--hero"></li>
<li class="MomentsCapsuleSummary"></li>
<li class="MomentsCapsuleSummary"></li>
<li class="MomentsCapsuleSummary"></li>
<li class="MomentsCapsuleSummary"></li>
<li class="MomentsCapsuleSummary"></li>
<li class="MomentsCapsuleSummary"></li>
<li class="MomentsCapsuleSummary"></li>
<li class="MomentsCapsuleSummary"></li>
<li class="MomentsCapsuleSummary"></li>
</ul>

53.
Problem:
Current tools for web
layout are
content-out and
one-dimensional.
Solution:
Two-dimensional
layout-in tool to
separate content
from presentation.

54.
1
2
3
4
5 6

55.
You, right now
OK, I’m listening…

56.
.site
.page-title
.main-content
.sidebar .footer
.masthead
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->

57.
• Grid container
• Grid item
• Grid line
• Grid cell
• Grid track
• Grid area
• Grid gap
CSS Grid
Terminology:

58.
Element containing a grid,
defined by setting
display: grid;
Grid container <div class="site">
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->

59.
Element that is a direct
descendant of the grid
container.
Grid item <div class="site">
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->

60.
Horizontal (row) or
vertical (column) line
separating the grid into
sections.
Grid line

61.
Grid lines are referenced
by number, starting and
ending with the outer
borders of the grid.
Grid line 1
2
3
4
5
6
1 2 3 4 5 6

62.
The intersection between
a grid row and a grid
column. Effectively the
same as a table cell.
Grid cell

63.
Rectangular area between
four specified grid lines.
Grid areas can cover one
or more cells.
Grid area

64.
The space between two or
more adjacent grid lines.
Row tracks are horizontal,
Column tracks vertical.
Grid track

65.
Empty space between grid
tracks (shown in blue).
Commonly called gutters.
Grid gap 1
2
3
4
5
6
1 2 3 4 5 6

66.
The person next to you
I’ll pretend I got that…

67.
1. Define a grid.
2. Place items within the grid.
3. Make world peace.
CSS Grid
in a
Nutshell:

68.
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->
.masthead
.page-title
.main-content
.sidebar
.footer
.site

69.
<div class="site">
</div><!-- .site -->
.masthead
.page-title
.main-content
.sidebar
.footer
.site

70.
.site
Creates a grid container.
display: grid;

71.
.site
2 fractions 1 fraction each
2fr 1fr 1fr
Draws grid lines. Takes list
of length values (em, px, %,
fr, etc.) denoting the
distance between each line.
grid-template-columns:
2fr 1fr 1fr;

72.
.site
Fit content
auto
1 fraction
1fr
3 fractions
3fr
Draws grid lines. Takes list
of length values (em, px, %,
fr, etc.) denoting the
distance between each line.
grid-template-rows:
auto 1fr 3fr;

73.
.masthead .page-
title
.main-
content
.sidebar .footer
.site
Grid items automatically
populate grid from top left
to bottom right based on
HTML source order.

74.
.site
1 2 3 4
.masthead
grid-column: 2/4;
grid-row: 2/3;
Applied to grid items. Defines
the start and end grid lines
for columns and rows.

75.
.site
1 2 3 4
Start at column line 2.
End at column line 4.
.masthead
grid-column: 2/4;
grid-row: 2/3;

76.
.masthead
.masthead
.site
1
2
3
4
Start at row line 2.
End at row line 3.
grid-column: 2/4;
grid-row: 2/3;

77.
.site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
}
.masthead {
grid-column: 2/4;
grid-row: 2/3;
}
.page-title {
grid-column: 1/4;
grid-row: 1/2;
}
.main-content {
grid-column: 1/2;
grid-row: 2/4;
}
/* etc etc */
1
2
3
4
1 2 3 4
.page-title
.main-content
.sidebar .footer
.masthead

78.
Naysayer to your left
Looks promising, but
remembering what lines to
target seems tricky… especially
when the site is responsive.

79.
.site
title title title
main
main
header header
sidebar footer
Applied to grid container. Uses a
text-based grid map to apply grid
area names to individual cells.
grid-template-areas

80.
.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer";
}

81.
Specifies what grid area the element is
placed within.
grid-area: [area-name];

82.
title title title
main
main
header header
sidebar footer
.page-title
.main-content
.sidebar .footer
.masthead
.site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer";
}
.masthead {
grid-area: header;
}
.page-title {
grid-area: title;
}
.main-content {
grid-area: main;
}
/* etc etc */

83.
.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title title"
"main header"
"main sidebar";
}
.masthead {
grid-area: header;
}
.page-title {
grid-area: title;
}
.main-content {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
@media screen and (min-width: 34em) {
.site {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer";
}
}

84.
.site
.page-title
.main-content
.sidebar .footer
.masthead
.site
.page-title
.main-content
.sidebar
.footer
.masthead
.site
.masthead
.page-title
.main-content
.sidebar
.footer
No grid Two-column grid Three-column grid

85.
Girds are not inherited by
child elements. Instead we
create nested grids.
Nested grids

86.
You, right now
Sooooooo… no more
floats and clears?

87.
Use CSS Grid any time you work with
two-dimensional layouts.

88.
One more thing

89.
The grid container
is a flexible box.

90.
.site {
display: grid;
grid-template-columns: repeat(6, 10em);
grid-gap: 1em;
}

91.
.site {
display: grid;
grid-template-columns: repeat(6, 10em);
justify-content: center;
grid-gap: 1em;
}

92.
.site {
display: grid;
grid-template-columns: repeat(6, 10em);
justify-content: space-between;
grid-gap: 1em;
}

93.
.site {
display: grid;
grid-template-columns: repeat(6, 10em);
justify-content: space-between;
grid-gap: 1em;
}

94.
repeat(auto-fit, 10em);
repeat(auto-fill, 10em);

95.
Creates as many 10em columns as will fit
within the grid container.
Will create empty columns.
grid-template-columns:
repeat(auto-fill, 10em);

96.
Creates as many 10em columns as will fit
within the grid container.
Does not create empty columns.
grid-template-columns:
repeat(auto-fit, 10em);

97.
https://codepen.io/mor10/pen/MEQJbM

98.
Your boss / client
… but older browsers!

99.
http://caniuse.com/#search=grid
Grid is supported in all modern browsers.

100.
The elephants
in the room

101.
Internet Explorer 101 and Edge2 lag behind*
1 IE10 uses the original Grid specification.
2 Edge is adopting the modern specification October 17th.
* Fun fact: CSS Grid was invented by Microsoft for IE10.

102.
Use feature queries to test for grid support
in the current browser.
@supports (display: grid) { … }
Current recommendation:

103.
HOLD ON THERE MORTEN!

104.
Everyone right now
That means the site
won’t look the same
in all browsers!

105.
If it works here…
… it works here as well!

106.
Forcing sites to look the same
across all browsers
is a bad habit.

107.
Responsive Web Design means
we’ve been serving up
different layouts for different browsers
since 2010.

108.
Progressive Enhancement
is Responsive Web Design
in three dimensions.

109.
Accessible mobile-first layouts
work well on all screen widths.

110.
Embrace Progressive Enhancement!
Use the paved desire paths!

111.
1. Build accessible mobile-first
layout without grid.
2. Use mobile-first layout as
fallback for all browsers.
3. Use @supports to detect grid
support.
4. At the appropriate
breakpoint, create layout
with grid and grid-areas.
5. Explore new layouts as
viewport widens.
CSS Grid:
A Practical
Approach
for Today

112.
More CSS Grid info:

113.
Firefox has a
grid inspector!
https://goo.gl/SJmlms

114.
Rachel Andrew’s
Grid by Example
is doctrine.
https://gridbyexample.com/

115.
Rachel Andrew’s
book The New CSS
Layout comes out
next week.
https://goo.gl/LY6cFy

116.
MDN has
exhaustive
documentation.
https://goo.gl/8RrH2Y

117.
Mozilla’s
CSS Grid
Playground is a
great place to
get the basics.
https://goo.gl/rmbkM5

118.
Mozilla also has
a demo site with
has exhaustive
documentation.
https://goo.gl/wa0Fk9

119.
CSS Tricks has a
Complete Guide
to CSS Grid.
https://goo.gl/Z01gjF

120.
Kuhn, my theme
using CSS grid,
is on GitHub to
give you ideas.
https://goo.gl/URouSh

121.
Building
Production-Ready
CSS Grid Layouts
Today
by yours truly at
Smashing Magazine
https://goo.gl/dae838

122.
Free for everyone until October 25th, 2017!
https://goo.gl/wyC1Lz

123.
Go build
your own
Desire Paths.

124.
1. Make it accessible.
2. Make it fancy.
3. Make sure the fancy
doesn’t break
accessibility.