How CSS Grid Changes Everything (i n 15 mi n s?) W3C Developer Meetup
@jenSimmons
Slide 1
Slide 2
F ollow @jensimmons for slides
Slide 3
Layout on the Web
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Slide 20
Slide 21
Slide 22
Slide 23
photo by Brad Frost, 2012, CC BY 2.0
Slide 24
Slide 25
Slide 26
Slide 27
Slide 28
The Official Timeline of Web Page Layout
The
No-Layout
Layout
Table -based
Layouts
Hand -coded
Float Layouts
F ramework
Layouts
Amazing
Future!
Slide 29
CSS Grid
Flexbox
Alignment
Writing Modes
Multicolumn
Viewport Units
Transforms
Object Fit
Clip-path
Masking
Shape-outside
Initial-letter
Flow
Floats
Block
Inline
Inline-block
Display:table
Margin
Negative margins
Padding
everything else
in CSS
Slide 30
This ne w CSS
changes everything
in web layout.
Slide 31
labs.jensimmons.com
Slide 32
Slide 33
Slide 34
Slide 35
Grid makes it
much easier to imple me nt
t he same old layouts.
Slide 36
Grid makes it possible
to do layouts that were
not possible be fore.
Slide 37
Nature of
CSS Grid
Slide 38
explicit vs. implicit
Slide 39
You define
!
e size and/or
number of rows
and/or
columns
Let
!
e browser
define number or
size of rows
or columns
Slide 40
P lace each
"
em
into a specific
cell or area
Let
!
e browser
place each
"
em using
auto-placement
a
lgor
"
hm
Slide 41
Row s and Columns
Slide 42
ROWS!!!!!!!!!!!
Slide 43
Slide 44
Slide 45
Tracks don’t have to all
be t he same size.
Slide 46
Slide 47
Slide 48
Conte nt sized by
t he size of a track.
Slide 49
Tracks sized by
t he size of c onte nt.
Slide 50
portion of
available
space —
2 parts
set by
content
size
fixed
portion of
available
space —
1 part
Slide 51
Grid Code
Slide 52
Slide 53
Slide 54
Grid Container
Slide 55
Grid Items
Slide 56
<body>
<header>…</header>
<main>
<article>
<h1>
<p>
<p>
<p>
<figure>
<p>
</article>
</main>
<aside>…</aside>
<footer>…</footer>
</body>
body {
display: grid;
}
Slide 57
<body>
<header>…</header>
<main>
<article>
<h1>
<p>
<p>
<p>
<figure>
<p>
</article>
</main>
<aside>…</aside>
<footer>…</footer>
</body>
body {
display: grid;
}
article {
display: grid;
}
Slide 58
<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;
}
Slide 59
<body>
<header>…</header>
<main>
<article>
<h1>
<p>
<p>
<p>
<figure>
<p>
</article>
</main>
<aside>…</aside>
<footer>…</footer>
</body>
body {
display: grid;
}
article {
display: grid;
}
Slide 60
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.
Headline
This is teaser text.
Headline That is
Longer & Wraps
This is teaser text. It
comes in different lengths.
Headline
This Headline
This is teaser text. It
comes in different lengths.
Slide 61
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.
Headline
This is teaser text.
Headline That is
Longer & Wraps
This is teaser text. It
comes in different lengths.
Headline
This Headline
This is teaser text. It
comes in different lengths.
Slide 62
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.
Headline
This is teaser text.
Headline That is
Longer & Wraps
This is teaser text. It
comes in different lengths.
Headline
This Headline
This is teaser text. It
comes in different lengths.
Slide 63
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.
Headline
This is teaser text.
Headline That is
Longer & Wraps
This is teaser text. It
comes in different lengths.
Headline
This Headline
This is teaser text. It
comes in different lengths.
Slide 64
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.
Headline
This is teaser text.
Headline That is
Longer & Wraps
This is teaser text. It
comes in different lengths.
Headline
This Headline
This is teaser text. It
comes in different lengths.
Slide 65
labs.jensimmons.com
Slide 66
Container Item Item Item
Slide 67
Ter minolog y
Slide 68
Grid Container
Slide 69
Grid Items
Slide 70
Grid Line Grid Track Grid Track Grid Line Grid Line Grid Line Grid Line Grid Area Grid Cell
Slide 71
Grid Line Grid Track Grid Line Grid Line Grid Line Grid Line Grid Gap Grid Gap Grid Gap Grid Track
Slide 72
4 Examples
Slide 73
labs.jensimmons.com/2017/01-003.html
Slide 74
Slide 75
<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>
Slide 76
ul {
display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 4px;
} li { // nothing }
Slide 77
ul {
display: grid; grid-template-columns:
repeat(4, 100px); grid-gap: 4px;
} li {
// nothing
}
Slide 78
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;
}
Slide 79
Slide 80
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;
}
Slide 81
Slide 82
ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 0.25rem; }
Slide 83
Slide 84
Slide 85
nightly.mozilla.org
Slide 86
ul {
display: grid; grid-template-columns:
repeat(4, 1fr);
}
Slide 87
li:nth-child(1) {
grid-column: 2 / 3;
grid-row: 1 / 2; }
Slide 88
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) { …}
Slide 89
‘fr ’ unit
Slide 90
.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;
Slide 91
px em % pixels (or rem) percents 60px 10em 20%
Slide 92
min-content max-content fr minmax()
Slide 93
fr unit = “fraction”
Slide 94
Slide 95
10 0 % 33% 33% 33%
Slide 96
10 0 % 33.33333% 33.33333 % 33.33333 %
Slide 97
10 0 % 33.33333% 33.33333 % 33.33333 %
Slide 98
10 0 % 33% 33% 33% 2% 2%
Slide 99
10 0 % 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3
Slide 100
10 0 % 31. 3 3 3 % 31. 3 3 3 % 31. 3 3 3 % 3% 3% 100% – 6% = 94% = 31.333% 3 3
Slide 101
10 0 % 31. 6 6 6 % 31. 6 6 6 % 31. 6 6 6% 2.5% 2.5% 100% – 5% = 95% = 31.666666666666666% 3 3
Slide 102
.box { width: calc(100-(22em)/3)%;} 10 0 % x% x% x% 2em 2em @media (min-width: 600px) { .box { width: calc(100-(22em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(32em)/4)%;}} @media (min-width: 1000px) { .box { width: calc(100-(42em)/5)%;}} @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}
Slide 103
10 0 % 1fr 1fr 1fr 2em 2em
Slide 104
1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr = 3fr total therefore, 1fr = 1/3 of the space
Slide 105
1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em
Slide 106
10 0 p x 1fr 1fr 1fr 1fr 10 0 p x
Slide 107
2fr 1fr 50px 1fr min-content
Slide 108
6fr 2.4fr 1fr 2.4fr 2fr
Slide 109
What about old brow sers?
Slide 110
Slide 111
6
Slide 112
Slide 113
Yo u m u s t s u p p o r t
browsers that
do not understand
CSS Grid.
Slide 114
@supports (foo: value) { // some CSS code here
}
Slide 115
// code for non-Grid browsers
@supports (display: grid) { // undo some of the above // then do your Grid layout
}
Slide 116
hacks.mozilla.org/2016/08/using-feature-queries-in-css
Slide 117
Slide 118
6
Slide 119
Yo u h a v e t w o c h o i c e s fo r
Internet Explorer (& old Edge):
- Leverage the 2012 Grid implementation.
- Pretend IE has no Grid.
Slide 120
Yo u h a v e t w o c h o i c e s fo r
Internet Explorer (& old Edge):
- Use old -ms-* syntax.
- Or don’t.
Slide 121
display: grid; grid-template-columns: repeat(4, 100px) ; display: -ms-grid; -ms-grid-columns: (100px)[4] ;
Slide 122
Autoprefixer
Slide 123
Slide 124
rachelandrew.co.uk/archives/2016/11/26/should-i-tr y- to-use-the-ie-implementation-of-css-grid-layout
Slide 125
Slide 126
Slide 127
Slide 128
Slide 129
Slide 130
For more…
Slide 131
jensimmons.com/post/feb-27-2017/learn-css-grid
Slide 132
developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout
Slide 133
Modern Layouts: Getting Out of Our Ruts Revolutionize Your Page: Real Art Direction on the Web 2015 2016 available on jensimmons.com
Slide 134
jensimmons.com
@jensimmons layout.land
labs.jensimmons.com Thanks!
