Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS GRID
CHANGES
EVERYTHING
(SHIFTING THE WEB LAYOUT PARADIGM)
Morten Rand-Hendriksen | @mor10 | WebCamp Zagreb 2017
mor10.com/wczg2017
SLIDES, LINKS, ETC:
@mor10 #CSSGrid #WCZG
Paradigm Shift
Desire Path
Pave the cowpath
To formalize an existing de-facto practice.
Desire Path:
A Short History
of Web Design
1990
Tim Berners-Lee publishes
first ever web page.
1990
Web
as
text
period
Web
as
text
period
1990
 Håkon Wium Lie proposes
Cascading Style Sheets
1994
1990
Web
as
text
period
1994
DarkAges
Web
as
text
period
DarkAges
1990
Lynda Weinman publishes
Designing with Web Graphics
1996
1990 1996
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
Web
as
text
period
1994
DarkAges
Wild West
period
-
Tables
Frames
Flash
“Pixel-perfect”
Web
as
text
period
DarkAges
1990
Jeffrey Zeldman publishes
Designin...
1990 20031996
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
1994
DarkAges
Wild W...
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
DarkAges
Wild West
period
-
Tables...
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
DarkAges
Wild West
period
-
Tables...
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
DarkAges
Wild West
period
-
Tables...
1990 20031996 2015
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
1994
DarkAges
W...
meanwhile…
Rachel Andrew
@rachelandrew
Jen Simmons
@jensimmons
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
DarkAges
Wild West
period
-
Tables...
1990 20031996 2015
Web Standards
Period
-
Floats
Clears
Blogs
“Web 2.0”
CSS layout hell
Web
as
text
period
1994
DarkAges
W...
Pave the cowpath
To formalize an existing de-facto practice.
Person behind you
What did I just watch?!?!
https://codepen.io/mor10/full/JrpRyv/
CSS Grid
makes the impossible possible
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummary--hero">...
2
3
4
8
9
10
5
6
7
1
2
3
4
8
9
10
5
6
7
1
2
3
4
1
2
3
4
8
9
10
5
6
7
1
10 10
2
3
4
8
9
10
5
6
7
1
11
12
14
15
11 1312
10
14
9
10
2 3
4
8
5
6 7
1
15
Since the beginning of (web) time,
web layouts have been broken.
We’ve just refined
how we break them.
.main-content .sidebar
.container
.main-content
.sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
background: blue;
}
.sidebar {
background: gr...
.main-content .sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
width: 45%;
float: left;
background: blue;
}
...
.main-content .sidebar
.wrap.wrap {
border: 5px solid red;
}
.main-content {
width: 45%;
float: left;
background: blue;
}
...
.main-content .sidebar
.wrap.wrap {
display: flex;
justify-content: 

space-between;
border: 5px solid red;
}
.main-conten...
.main-content .sidebar
.wrap
.other-content
.main-content .sidebar
.wrap
.other-content
.container
.main-content .sidebar
.wrap.wrap {
display: flex;
justify-content: 

space-between;
border: 5px solid red;
}
.container {...
This is a hack.
float and flex force us
to create HTML clutter in
the form of wrappers
like the .container
element in this...
This is web
layouts today.
float and flex have
been the two only
options for creating
horizontal layouts
resulting in the ...
http://getbootstrap.com/css/
Paal Joachim Romdahl on Advanced WordPress Group
Me, every time I build a new site
What if
we didn’t have to do this
any more…
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummary--hero">...
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummary--hero">...
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummaryGroup">
<div class="MomentsCapsuleSummary--hero">...
<div class="MomentsGuidePage-capsules">
<div class="MomentsCapsuleSummary--hero"></div>
<div class="MomentsCapsuleSummary-...
<ul class="MomentsGuidePage-capsules">
<li class="MomentsCapsuleSummary--hero"></li>
<li class="MomentsCapsuleSummary"></l...
Problem:
Current tools for web
layout are
content-out and
one-dimensional.
Solution:
Two-dimensional
layout-in tool to
sep...
1
2
3
4
5 6
You, right now
OK, I’m listening…
.site
.page-title
.main-content
.sidebar .footer
.masthead
<div class="site">
<header class="masthead">
</header>
<h1 clas...
• Grid container
• Grid item
• Grid line
• Grid cell
• Grid track
• Grid area
• Grid gap
CSS Grid
Terminology:
Element containing a grid,
defined by setting
display: grid;
Grid container <div class="site">
<header class="masthead">
</...
Element that is a direct
descendant of the grid
container.
Grid item <div class="site">
<header class="masthead">
</header...
Horizontal (row) or
vertical (column) line
separating the grid into
sections.
Grid line
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...
The intersection between
a grid row and a grid
column. Effectively the
same as a table cell.
Grid cell
Rectangular area between
four specified grid lines.
Grid areas can cover one
or more cells.
Grid area
The space between two or
more adjacent grid lines.
Row tracks are horizontal,
Column tracks vertical.
Grid track
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
The person next to you
I’ll pretend I got that…
1. Define a grid.
2. Place items within the grid.
3. Make world peace.
CSS Grid
in a
Nutshell:
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">
</h1>
<main class="main-content">
</main>
<...
<div class="site">
</div><!-- .site -->
.masthead
.page-title
.main-content
.sidebar
.footer
.site
.site
Creates a grid container.
display: grid;
.site
2 fractions 1 fraction each
2fr 1fr 1fr
Draws grid lines. Takes list
of length values (em, px, %,
fr, etc.) denoting...
.site
Fit content
auto
1 fraction
1fr
3 fractions
3fr
Draws grid lines. Takes list
of length values (em, px, %,
fr, etc.) ...
.masthead .page-
title
.main-
content
.sidebar .footer
.site
Grid items automatically
populate grid from top left
to botto...
.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 co...
.site
1 2 3 4
Start at column line 2.
End at column line 4.
.masthead
grid-column: 2/4;
grid-row: 2/3;
.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;
.site.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
}
.masthead {
grid-colum...
Naysayer to your left
Looks promising, but
remembering what lines to
target seems tricky… especially
when the site is resp...
.site
title title title
main
main
header header
sidebar footer
Applied to grid container. Uses a
text-based grid map to ap...
.site {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title t...
Specifies what grid area the element is
placed within.
grid-area: [area-name];
title title title
main
main
header header
sidebar footer
.page-title
.main-content
.sidebar .footer
.masthead
.site.site {...
.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr 3fr;
grid-template-areas:
"title title...
.site
.page-title
.main-content
.sidebar .footer
.masthead
.site
.page-title
.main-content
.sidebar
.footer
.masthead
.sit...
Girds are not inherited by
child elements. Instead we
create nested grids.
Nested grids
You, right now
Sooooooo… no more
floats and clears?
Use CSS Grid any time you work with
two-dimensional layouts.
One more thing
The grid container
is a flexible box.
.site {
display: grid;
grid-template-columns: repeat(6, 10em);
grid-gap: 1em;
}
.site {
display: grid;
grid-template-columns: repeat(6, 10em);
justify-content: center;
grid-gap: 1em;
}
.site {
display: grid;
grid-template-columns: repeat(6, 10em);
justify-content: space-between;
grid-gap: 1em;
}
.site {
display: grid;
grid-template-columns: repeat(6, 10em);
justify-content: space-between;
grid-gap: 1em;
}
repeat(auto-fit, 10em);
repeat(auto-fill, 10em);
Creates as many 10em columns as will fit
within the grid container.
Will create empty columns.
grid-template-columns: 

rep...
Creates as many 10em columns as will fit
within the grid container.
Does not create empty columns.
grid-template-columns: 
...
https://codepen.io/mor10/pen/MEQJbM
Your boss / client
… but older browsers!
http://caniuse.com/#search=grid
Grid is supported in all modern browsers.
The elephants
in the room
Internet Explorer 101 and Edge2 lag behind*
1 IE10 uses the original Grid specification.
2 Edge is adopting the modern spec...
Use feature queries to test for grid support
in the current browser.
@supports (display: grid) { … }
Current recommendatio...
HOLD ON THERE MORTEN!
Everyone right now
That means the site
won’t look the same
in all browsers!
If it works here…
… it works here as well!
Forcing sites to look the same
across all browsers
is a bad habit.
Responsive Web Design means
we’ve been serving up
different layouts for different browsers
since 2010.
Progressive Enhancement
is Responsive Web Design
in three dimensions.
Accessible mobile-first layouts
work well on all screen widths.
Embrace Progressive Enhancement!
Use the paved desire paths!
1. Build accessible mobile-first
layout without grid.
2. Use mobile-first layout as
fallback for all browsers.
3. Use @suppo...
More CSS Grid info:
Firefox has a
grid inspector!
https://goo.gl/SJmlms
Rachel Andrew’s
Grid by Example
is doctrine.
https://gridbyexample.com/
Rachel Andrew’s
book The New CSS
Layout comes out
next week.
https://goo.gl/LY6cFy
MDN has
exhaustive
documentation.
https://goo.gl/8RrH2Y
Mozilla’s
CSS Grid
Playground is a
great place to
get the basics.
https://goo.gl/rmbkM5
Mozilla also has
a demo site with
has exhaustive
documentation.
https://goo.gl/wa0Fk9
CSS Tricks has a
Complete Guide
to CSS Grid.
https://goo.gl/Z01gjF
Kuhn, my theme
using CSS grid,
is on GitHub to
give you ideas.
https://goo.gl/URouSh
Building
Production-Ready
CSS Grid Layouts
Today
by yours truly at
Smashing Magazine
https://goo.gl/dae838
Free for everyone until October 25th, 2017!
https://goo.gl/wyC1Lz
Go build
your own
Desire Paths.
1. Make it accessible.
2. Make it fancy.
3. Make sure the fancy
doesn’t break
accessibility.
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Responsive Web Design Tutorial PDF for Beginners
Next
Upcoming SlideShare
Responsive Web Design Tutorial PDF for Beginners
Next
Download to read offline and view in fullscreen.

6

Share

CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017

Download to read offline

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today. The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface. In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way. CSS Grid is here, and you can start using it today. This talk shows you how to do it right.

CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017

  1. 1. CSS GRID CHANGES EVERYTHING (SHIFTING THE WEB LAYOUT PARADIGM) Morten Rand-Hendriksen | @mor10 | WebCamp Zagreb 2017
  2. 2. mor10.com/wczg2017 SLIDES, LINKS, ETC: @mor10 #CSSGrid #WCZG
  3. 3. Paradigm Shift
  4. 4. Desire Path
  5. 5. Pave the cowpath To formalize an existing de-facto practice.
  6. 6. Desire Path: A Short History of Web Design
  7. 7. 1990 Tim Berners-Lee publishes first ever web page.
  8. 8. 1990 Web as text period
  9. 9. Web as text period 1990  Håkon Wium Lie proposes Cascading Style Sheets 1994
  10. 10. 1990 Web as text period 1994 DarkAges
  11. 11. Web as text period DarkAges 1990 Lynda Weinman publishes Designing with Web Graphics 1996
  12. 12. 1990 1996 Wild West period - Tables Frames Flash “Pixel-perfect” Web as text period 1994 DarkAges
  13. 13. Wild West period - Tables Frames Flash “Pixel-perfect” Web as text period DarkAges 1990 Jeffrey Zeldman publishes Designing with Web Standards 20031996
  14. 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. 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. 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. 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. 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. 19. meanwhile…
  20. 20. Rachel Andrew @rachelandrew Jen Simmons @jensimmons
  21. 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. 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. 23. Pave the cowpath To formalize an existing de-facto practice.
  24. 24. Person behind you What did I just watch?!?!
  25. 25. https://codepen.io/mor10/full/JrpRyv/
  26. 26. CSS Grid makes the impossible possible
  27. 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. 28. 2 3 4 8 9 10 5 6 7 1
  29. 29. 2 3 4 8 9 10 5 6 7 1
  30. 30. 2 3 4 1
  31. 31. 2 3 4 8 9 10 5 6 7 1
  32. 32. 10 10 2 3 4 8 9 10 5 6 7 1 11 12 14 15
  33. 33. 11 1312 10 14 9 10 2 3 4 8 5 6 7 1 15
  34. 34. Since the beginning of (web) time, web layouts have been broken. We’ve just refined how we break them.
  35. 35. .main-content .sidebar .container
  36. 36. .main-content .sidebar .wrap.wrap { border: 5px solid red; } .main-content { background: blue; } .sidebar { background: green; }
  37. 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. 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. 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. 40. .main-content .sidebar .wrap .other-content
  41. 41. .main-content .sidebar .wrap .other-content .container
  42. 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. 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. 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. 45. http://getbootstrap.com/css/
  46. 46. Paal Joachim Romdahl on Advanced WordPress Group
  47. 47. Me, every time I build a new site What if we didn’t have to do this any more…
  48. 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. 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. 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. 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. 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. 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. 54. 1 2 3 4 5 6
  55. 55. You, right now OK, I’m listening…
  56. 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. 57. • Grid container • Grid item • Grid line • Grid cell • Grid track • Grid area • Grid gap CSS Grid Terminology:
  58. 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. 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. 60. Horizontal (row) or vertical (column) line separating the grid into sections. Grid line
  61. 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. 62. The intersection between a grid row and a grid column. Effectively the same as a table cell. Grid cell
  63. 63. Rectangular area between four specified grid lines. Grid areas can cover one or more cells. Grid area
  64. 64. The space between two or more adjacent grid lines. Row tracks are horizontal, Column tracks vertical. Grid track
  65. 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. 66. The person next to you I’ll pretend I got that…
  67. 67. 1. Define a grid. 2. Place items within the grid. 3. Make world peace. CSS Grid in a Nutshell:
  68. 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. 69. <div class="site"> </div><!-- .site --> .masthead .page-title .main-content .sidebar .footer .site
  70. 70. .site Creates a grid container. display: grid;
  71. 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. 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. 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. 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. 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. 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. 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. 78. Naysayer to your left Looks promising, but remembering what lines to target seems tricky… especially when the site is responsive.
  79. 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. 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. 81. Specifies what grid area the element is placed within. grid-area: [area-name];
  82. 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. 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. 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. 85. Girds are not inherited by child elements. Instead we create nested grids. Nested grids
  86. 86. You, right now Sooooooo… no more floats and clears?
  87. 87. Use CSS Grid any time you work with two-dimensional layouts.
  88. 88. One more thing
  89. 89. The grid container is a flexible box.
  90. 90. .site { display: grid; grid-template-columns: repeat(6, 10em); grid-gap: 1em; }
  91. 91. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: center; grid-gap: 1em; }
  92. 92. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: space-between; grid-gap: 1em; }
  93. 93. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: space-between; grid-gap: 1em; }
  94. 94. repeat(auto-fit, 10em); repeat(auto-fill, 10em);
  95. 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. 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. 97. https://codepen.io/mor10/pen/MEQJbM
  98. 98. Your boss / client … but older browsers!
  99. 99. http://caniuse.com/#search=grid Grid is supported in all modern browsers.
  100. 100. The elephants in the room
  101. 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. 102. Use feature queries to test for grid support in the current browser. @supports (display: grid) { … } Current recommendation:
  103. 103. HOLD ON THERE MORTEN!
  104. 104. Everyone right now That means the site won’t look the same in all browsers!
  105. 105. If it works here… … it works here as well!
  106. 106. Forcing sites to look the same across all browsers is a bad habit.
  107. 107. Responsive Web Design means we’ve been serving up different layouts for different browsers since 2010.
  108. 108. Progressive Enhancement is Responsive Web Design in three dimensions.
  109. 109. Accessible mobile-first layouts work well on all screen widths.
  110. 110. Embrace Progressive Enhancement! Use the paved desire paths!
  111. 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. 112. More CSS Grid info:
  113. 113. Firefox has a grid inspector! https://goo.gl/SJmlms
  114. 114. Rachel Andrew’s Grid by Example is doctrine. https://gridbyexample.com/
  115. 115. Rachel Andrew’s book The New CSS Layout comes out next week. https://goo.gl/LY6cFy
  116. 116. MDN has exhaustive documentation. https://goo.gl/8RrH2Y
  117. 117. Mozilla’s CSS Grid Playground is a great place to get the basics. https://goo.gl/rmbkM5
  118. 118. Mozilla also has a demo site with has exhaustive documentation. https://goo.gl/wa0Fk9
  119. 119. CSS Tricks has a Complete Guide to CSS Grid. https://goo.gl/Z01gjF
  120. 120. Kuhn, my theme using CSS grid, is on GitHub to give you ideas. https://goo.gl/URouSh
  121. 121. Building Production-Ready CSS Grid Layouts Today by yours truly at Smashing Magazine https://goo.gl/dae838
  122. 122. Free for everyone until October 25th, 2017! https://goo.gl/wyC1Lz
  123. 123. Go build your own Desire Paths.
  124. 124. 1. Make it accessible. 2. Make it fancy. 3. Make sure the fancy doesn’t break accessibility.
  • AnilKumar1545

    Aug. 6, 2020
  • YoucefDjibaoui

    Jul. 20, 2020
  • csuka094

    Dec. 31, 2019
  • ManoharLal4

    Apr. 30, 2019
  • FerlyWilar

    May. 8, 2018
  • KoKimura

    Oct. 14, 2017

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today. The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface. In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way. CSS Grid is here, and you can start using it today. This talk shows you how to do it right.

Views

Total views

1,309

On Slideshare

0

From embeds

0

Number of embeds

5

Actions

Downloads

84

Shares

0

Comments

0

Likes

6

×