css grid changes everything - keynote at webcamp zagreb 2017
TRANSCRIPT
![Page 1: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/1.jpg)
CSS GRID CHANGES EVERYTHING (SHIFTING THE WEB LAYOUT PARADIGM)
Morten Rand-Hendriksen | @mor10 | WebCamp Zagreb 2017
![Page 2: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/2.jpg)
![Page 3: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/3.jpg)
mor10.com/wczg2017SLIDES, LINKS, ETC:
@mor10 #CSSGrid #WCZG
![Page 4: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/4.jpg)
![Page 5: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/5.jpg)
![Page 6: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/6.jpg)
![Page 7: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/7.jpg)
![Page 8: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/8.jpg)
![Page 9: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/9.jpg)
![Page 10: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/10.jpg)
Paradigm Shift
![Page 11: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/11.jpg)
Desire Path
![Page 12: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/12.jpg)
![Page 13: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/13.jpg)
![Page 14: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/14.jpg)
![Page 15: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/15.jpg)
Pave the cowpath
To formalize an existing de-facto practice.
![Page 16: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/16.jpg)
Desire Path: A Short History of Web Design
![Page 17: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/17.jpg)
1990
Tim Berners-Lee publishes first ever web page.
![Page 18: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/18.jpg)
1990
Web as
text period
![Page 19: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/19.jpg)
Web as
text period
1990
Håkon Wium Lie proposes Cascading Style Sheets
1994
![Page 20: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/20.jpg)
1990
Web as
text period
1994
Dar
k A
ges
![Page 21: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/21.jpg)
Web as
text period D
ark
Age
s
1990
Lynda Weinman publishes Designing with Web Graphics
1996
![Page 22: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/22.jpg)
1990 1996
Wild West period
- Tables Frames Flash
“Pixel-perfect”
Web as
text period
1994
Dar
k A
ges
![Page 23: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/23.jpg)
Wild West period
- Tables Frames Flash
“Pixel-perfect”
Web as
text period D
ark
Age
s
1990
Jeffrey Zeldman publishes Designing with Web Standards
20031996
![Page 24: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/24.jpg)
1990 20031996
Web Standards Period
- Floats Clears Blogs
“Web 2.0” CSS layout hell
Web as
text period
1994
Dar
k A
ges
Wild West period
- Tables Frames Flash
“Pixel-perfect”
![Page 25: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/25.jpg)
![Page 26: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/26.jpg)
![Page 27: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/27.jpg)
![Page 28: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/28.jpg)
![Page 29: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/29.jpg)
![Page 30: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/30.jpg)
Web Standards Period
- Floats Clears Blogs
“Web 2.0” CSS layout hell
Web as
text period D
ark
Age
s
Wild West period
- Tables Frames Flash
“Pixel-perfect”
1990 20031996 2012
Microsoft releases Windows 8
![Page 31: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/31.jpg)
Web Standards Period
- Floats Clears Blogs
“Web 2.0” CSS layout hell
Web as
text period D
ark
Age
s
Wild West period
- Tables Frames Flash
“Pixel-perfect”
1990 20031996 2012
Microsoft proposes CSS Grid Layout
![Page 32: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/32.jpg)
Web Standards Period
- Floats Clears Blogs
“Web 2.0” CSS layout hell
Web as
text period D
ark
Age
s
Wild West period
- Tables Frames Flash
“Pixel-perfect”
1990 20031996 2015
display: flex;
2012
![Page 33: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/33.jpg)
1990 20031996 2015
Web Standards Period
- Floats Clears Blogs
“Web 2.0” CSS layout hell
Web as
text period
1994
Dar
k A
ges
Wild West period
- Tables Frames Flash
“Pixel-perfect”
Un
cert
ain
ty P
erio
d
![Page 34: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/34.jpg)
![Page 35: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/35.jpg)
![Page 36: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/36.jpg)
meanwhile…
![Page 37: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/37.jpg)
Rachel Andrew @rachelandrew
Jen Simmons @jensimmons
![Page 38: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/38.jpg)
Web Standards Period
- Floats Clears Blogs
“Web 2.0” CSS layout hell
Web as
text period D
ark
Age
s
Wild West period
- Tables Frames Flash
“Pixel-perfect”
Un
cert
ain
ty P
erio
d
1990 201720031996 2015
display: grid;
2012
![Page 39: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/39.jpg)
1990 20031996 2015
Web Standards Period
- Floats Clears Blogs
“Web 2.0” CSS layout hell
Web as
text period
1994
Dar
k A
ges
Wild West period
- Tables Frames Flash
“Pixel-perfect”
Un
cert
ain
ty P
erio
d
2017
Web as
Layout Surface
![Page 40: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/40.jpg)
![Page 41: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/41.jpg)
![Page 42: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/42.jpg)
![Page 43: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/43.jpg)
Pave the cowpath
To formalize an existing de-facto practice.
![Page 44: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/44.jpg)
![Page 45: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/45.jpg)
![Page 46: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/46.jpg)
![Page 47: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/47.jpg)
![Page 48: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/48.jpg)
Person behind you
What did I just watch?!?!
![Page 49: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/49.jpg)
https://codepen.io/mor10/full/JrpRyv/
![Page 50: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/50.jpg)
![Page 51: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/51.jpg)
CSS Grid makes the impossible possible
![Page 52: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/52.jpg)
![Page 53: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/53.jpg)
![Page 54: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/54.jpg)
![Page 55: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/55.jpg)
![Page 56: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/56.jpg)
![Page 57: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/57.jpg)
![Page 58: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/58.jpg)
![Page 59: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/59.jpg)
<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> </div>
![Page 60: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/60.jpg)
2
3
4
8
9
10
5
6
7
1
![Page 61: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/61.jpg)
2
3
4
8
9
10
5
6
7
1
![Page 62: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/62.jpg)
2
3
4
1
![Page 63: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/63.jpg)
2
3
4
8
9
10
5
6
7
1
![Page 64: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/64.jpg)
10 10
2
3
4
8
9
10
5
6
7
1
11
12
14
15
![Page 65: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/65.jpg)
11 1312
10
14
9
10
2 3
4
8
5
6 7
1
15
![Page 66: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/66.jpg)
Since the beginning of (web) time, web layouts have been broken.
We’ve just refined how we break them.
![Page 67: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/67.jpg)
.main-content .sidebar
.container
![Page 68: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/68.jpg)
.main-content
.sidebar
.wrap.wrap { border: 5px solid red; }
.main-content { background: blue; }
.sidebar { background: green; }
![Page 69: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/69.jpg)
.main-content .sidebar
.wrap.wrap { border: 5px solid red; }
.main-content { width: 45%; float: left; background: blue; }
.sidebar { width: 45%; float: right; background: green; }
![Page 70: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/70.jpg)
.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; }
![Page 71: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/71.jpg)
.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; }
![Page 72: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/72.jpg)
.main-content .sidebar
.wrap
.other-content
![Page 73: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/73.jpg)
.main-content .sidebar
.wrap
.other-content
.container
![Page 74: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/74.jpg)
.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
![Page 75: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/75.jpg)
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
![Page 76: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/76.jpg)
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
![Page 77: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/77.jpg)
http://getbootstrap.com/css/
![Page 78: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/78.jpg)
![Page 79: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/79.jpg)
Paal Joachim Romdahl on Advanced WordPress Group
![Page 80: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/80.jpg)
Me, every time I build a new site
What if we didn’t have to do this any more…
![Page 81: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/81.jpg)
<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> </div>
![Page 82: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/82.jpg)
![Page 83: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/83.jpg)
![Page 84: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/84.jpg)
<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> </div>
![Page 85: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/85.jpg)
<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> </div>
![Page 86: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/86.jpg)
<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>
![Page 87: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/87.jpg)
<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>
![Page 88: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/88.jpg)
Problem:
Current tools for web layout are
content-out and one-dimensional.
Solution:
Two-dimensional layout-in tool to separate content
from presentation.
![Page 89: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/89.jpg)
![Page 90: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/90.jpg)
![Page 91: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/91.jpg)
1
2
3
4
5 6
![Page 92: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/92.jpg)
![Page 93: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/93.jpg)
You, right now
OK, I’m listening…
![Page 94: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/94.jpg)
.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 -->
![Page 95: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/95.jpg)
• Grid container • Grid item • Grid line • Grid cell • Grid track • Grid area • Grid gap
CSS Grid Terminology:
![Page 96: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/96.jpg)
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 -->
![Page 97: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/97.jpg)
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 -->
![Page 98: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/98.jpg)
Horizontal (row) or
vertical (column) line
separating the grid into
sections.
Grid line
![Page 99: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/99.jpg)
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
![Page 100: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/100.jpg)
The intersection between
a grid row and a grid
column. Effectively the
same as a table cell.
Grid cell
![Page 101: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/101.jpg)
Rectangular area between
four specified grid lines.
Grid areas can cover one
or more cells.
Grid area
![Page 102: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/102.jpg)
The space between two or
more adjacent grid lines.
Row tracks are horizontal,
Column tracks vertical.
Grid track
![Page 103: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/103.jpg)
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
![Page 104: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/104.jpg)
The person next to you
I’ll pretend I got that…
![Page 105: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/105.jpg)
1. Define a grid.
2. Place items within the grid.
3. Make world peace.
CSS Grid in a Nutshell:
![Page 106: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/106.jpg)
<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
![Page 107: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/107.jpg)
<div class="site">
</div><!-- .site -->
.masthead
.page-title
.main-content
.sidebar
.footer
.site
![Page 108: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/108.jpg)
.site
Creates a grid container.
display: grid;
![Page 109: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/109.jpg)
.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;
![Page 110: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/110.jpg)
.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;
![Page 111: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/111.jpg)
.masthead .page- title
.main- content
.sidebar .footer
.site
Grid items automatically
populate grid from top left
to bottom right based on
HTML source order.
![Page 112: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/112.jpg)
.site1 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.
![Page 113: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/113.jpg)
.site1 2 3 4
Start at column line 2. End at column line 4.
.masthead
grid-column: 2/4; grid-row: 2/3;
![Page 114: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/114.jpg)
.masthead
.masthead
.site1
2
3
4
Start at row line 2. End at row line 3.
grid-column: 2/4; grid-row: 2/3;
![Page 115: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/115.jpg)
.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
![Page 116: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/116.jpg)
Naysayer to your left
Looks promising, but remembering what lines to target seems tricky… especially when the site is responsive.
![Page 117: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/117.jpg)
.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
![Page 118: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/118.jpg)
.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"; }
![Page 119: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/119.jpg)
Specifies what grid area the element is placed within.
grid-area: [area-name];
![Page 120: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/120.jpg)
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 */
![Page 121: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/121.jpg)
.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"; }
}
![Page 122: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/122.jpg)
.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
![Page 123: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/123.jpg)
Girds are not inherited by
child elements. Instead we
create nested grids.
Nested grids
![Page 124: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/124.jpg)
![Page 125: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/125.jpg)
![Page 126: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/126.jpg)
You, right now
Sooooooo… no more floats and clears?
![Page 127: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/127.jpg)
Use CSS Grid any time you work with two-dimensional layouts.
![Page 128: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/128.jpg)
One more thing
![Page 129: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/129.jpg)
The grid container is a flexible box.
![Page 130: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/130.jpg)
![Page 131: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/131.jpg)
.site { display: grid; grid-template-columns: repeat(6, 10em); grid-gap: 1em; }
![Page 132: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/132.jpg)
.site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: center; grid-gap: 1em; }
![Page 133: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/133.jpg)
.site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: space-between; grid-gap: 1em; }
![Page 134: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/134.jpg)
.site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: space-between; grid-gap: 1em; }
![Page 135: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/135.jpg)
repeat(auto-fit, 10em); repeat(auto-fill, 10em);
![Page 136: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/136.jpg)
![Page 137: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/137.jpg)
Creates as many 10em columns as will fit within the grid container.
Will create empty columns.
grid-template-columns: repeat(auto-fill, 10em);
![Page 138: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/138.jpg)
Creates as many 10em columns as will fit within the grid container.
Does not create empty columns.
grid-template-columns: repeat(auto-fit, 10em);
![Page 139: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/139.jpg)
https://codepen.io/mor10/pen/MEQJbM
![Page 140: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/140.jpg)
Your boss / client
… but older browsers!
![Page 141: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/141.jpg)
http://caniuse.com/#search=grid
Grid is supported in all modern browsers.
![Page 142: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/142.jpg)
The elephants in the room
![Page 143: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/143.jpg)
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.
![Page 144: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/144.jpg)
Use feature queries to test for grid support in the current browser.
@supports (display: grid) { … }
Current recommendation:
![Page 145: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/145.jpg)
HOLD ON THERE MORTEN!
![Page 146: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/146.jpg)
Everyone right now
That means the site won’t look the same in all browsers!
![Page 147: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/147.jpg)
If it works here…
… it works here as well!
![Page 148: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/148.jpg)
Forcing sites to look the same across all browsers
is a bad habit.
![Page 149: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/149.jpg)
Responsive Web Design means we’ve been serving up
different layouts for different browsers since 2010.
![Page 150: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/150.jpg)
Progressive Enhancement is Responsive Web Design
in three dimensions.
![Page 151: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/151.jpg)
Accessible mobile-first layouts work well on all screen widths.
![Page 152: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/152.jpg)
![Page 153: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/153.jpg)
![Page 154: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/154.jpg)
![Page 155: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/155.jpg)
![Page 156: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/156.jpg)
Embrace Progressive Enhancement! Use the paved desire paths!
![Page 157: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/157.jpg)
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
![Page 158: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/158.jpg)
More CSS Grid info:
![Page 159: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/159.jpg)
Firefox has a grid inspector!
https://goo.gl/SJmlms
![Page 160: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/160.jpg)
Rachel Andrew’s Grid by Example is doctrine.
https://gridbyexample.com/
![Page 161: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/161.jpg)
Rachel Andrew’s book The New CSS Layout comes out next week.
https://goo.gl/LY6cFy
![Page 162: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/162.jpg)
MDN has exhaustive documentation.
https://goo.gl/8RrH2Y
![Page 163: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/163.jpg)
Mozilla’s CSS Grid Playground is a great place to get the basics.
https://goo.gl/rmbkM5
![Page 164: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/164.jpg)
Mozilla also has a demo site with has exhaustive documentation.
https://goo.gl/wa0Fk9
![Page 165: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/165.jpg)
CSS Tricks has a Complete Guide to CSS Grid.
https://goo.gl/Z01gjF
![Page 166: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/166.jpg)
Kuhn, my theme using CSS grid, is on GitHub to give you ideas.
https://goo.gl/URouSh
![Page 167: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/167.jpg)
Building Production-Ready CSS Grid Layouts Today by yours truly at Smashing Magazine
https://goo.gl/dae838
![Page 169: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/169.jpg)
Go build your own Desire Paths.
![Page 170: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/170.jpg)
1. Make it accessible.
2. Make it fancy.
3. Make sure the fancy doesn’t break accessibility.
![Page 171: CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017](https://reader034.vdocuments.us/reader034/viewer/2022042723/5a66bc107f8b9a817e8b47cd/html5/thumbnails/171.jpg)