1. C S S 4 G R I D : T R U E L A Y O U T
F I N A L L Y A R R I V E S
J E N K R A M E R
H A R V A R D U N I V E R S I T Y E X T E N S I O N S C H O O L

3. https://www.w3.org/TR/css-2015/#css-levels
“There is no CSS Level 4… CSS the
language no longer has levels.”

4. https://www.w3.org/TR/html51/

6. C S S 4 G R I D : T R U E L A Y O U T
F I N A L L Y A R R I V E S
J E N K R A M E R
H A R V A R D U N I V E R S I T Y E X T E N S I O N S C H O O L
X
https://www.github.com/jen4web/cssgrid

9. Time spent trying to get
the layout to work using
Flexbox, before giving up
and using floats

10. • Defined by three characteristics
• Flexible grid-based layout
• Media queries (CSS3)
• Images that resize
• www.alistapart.com/articles/responsive-web-design/
R E S P O N S I V E D E S I G N

11. F L O A T S
P A R T 1

12. • A hack from the start, right after table-based layout!
• Features rows and cells.
• Rows clear the floats on the cells.
• Source ordering determines display, though some
(minor) rearrangement is possible.
• Major disadvantage: equal column heights
F L O A T S

13. . R O W
C E L L /
. C O L - 1
C E L L /
. C O L - 1
C E L L /
. C O L - 1
C E L L /
. C O L - 1
<div class=“row”>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
</div>

14. . R O W
C E L L /
. C O L - 1
C E L L /
. C O L - 1
C E L L /
. C O L - 1
C E L L /
. C O L - 1
.row::after {
content: "";
display: table;
clear: both;
}
.col-1 {
float: left;
margin-left: 4%;
width: 20%;
}

15. . R O W
C E L L /
. C O L - 1
C E L L /
. C O L - 1
C E L L /
. C O L - 1
C E L L /
. C O L - 1
@media only screen and (min-width: 480px)
and (max-width: 767px) {
.col-1 {
width: 44%;
}
}

16. R O W
C E L L /
. C O L - 1
C E L L /
. C O L - 1
C E L L /
. C O L - 1
C E L L /
. C O L - 1
@media only screen and
(max-width: 479px) {
.col-1 {
width: 98%;
margin: 1%;
float: none;
}
}

17. . R O W
C E L L /
. C O L - 1
1
C E L L /
. C O L - 1
2
C E L L /
. C O L - 1
3
C E L L /
. C O L - 1
4
There can be layout problems
with floats.
This can be resolved with
JavaScript, with a column
equalizer script.

18. /* rearranging the columns */
[class*="col-"] {
position: relative;
}
.col-push-1 {
left: 26%;
}
.col-pull-3 {
left: -74%;
}

19. F L E X B O X
P A R T 2

20. • The first layout elements – but not designed to lay out
whole web pages
• Features flex-containers (row) and flex-items (cells). Both are
required to work.
• Excels at vertical centering and equal heights
• Very easy to reorder boxes
• Major disadvantages:
• Wasn’t designed to be locked down for layouts! Works in
1 dimension only.
• Browser support and syntax is challenging.
F L E X B O X

21. T H R E E V E R S I O N S O F F L E X B O X
• 2009: display: box;
• 2011: display: flexbox; (“tweener” syntax)
• 2016: display: flex;
• Prefixing may still be required depending on
browser support desired

22. C U R R E N T S U P P O R T
• Internet Explorer
• <= IE 9: not supported
• IE 10 supports “tweener” syntax (ms prefix)
• IE 11, Edge: Full support (though buggy in IE 11)
• Safari 7.1/8, iOS Safari 7/8 require webkit prefix
• Others support current syntax (including Opera!)
• http://caniuse.com/#feat=flexbox

23. <div class=“row”>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
<div class=“col-1”></div>
</div>
. R O W / C O N T A I N E R
I T E M /
. C O L - 1
I T E M /
. C O L - 1
I T E M /
. C O L - 1
I T E M /
. C O L - 1

24. .row {
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
justify-content: center;
margin: 1%;
}
Change flex-flow to other values to change
direction of rows – row reverse, column
reverse, no wrap

25. .col-1 includes:
flex: 0 0 24%; /* desktop */
flex: 0 0 48%; /* tablet */
flex: 0 0 98%; /* phone */
To change widths on .col-1, change the
flex-basis property. This is more flexible than
width.

26. /* rearranging the columns */
.col-push-1 {
order: 2;
}
.col-pull-3 {
order: 1;
}

27. C S S G R I D
F I N A L L Y !

28. • Built into CSS specification (now a recommendation).
• No “row” markup required.
• Grid is designed to work in 2 dimensions.
• Use Flexbox for UI elements, but use Grid for major
layout.
W H Y C S S G R I D ?

29. https://drafts.csswg.org/css-grid/

30. • Full support: FF 52+, Chrome 57+, Safari 10.1+, Opera
44+ , iOS Safari 10.3+, Chrome for Android 59+,
Firefox for Android 59+
• Partial support: IE 10, IE 11, Edge 12+, IE Mobile 10+
(these based on an older spec)
• No support: Mostly mobile browsers (Opera Mini,
Opera Mobile, Blackberry, Android, etc)
• http://caniuse.com/#search=grid
B R O W S E R S U P P O R T

31. • Old spec:
https://github.com/codler/Grid-Layout-Polyfill
• New spec:
https://github.com/FremyCompany/css-grid-polyfill/
• @supports may help with all but IE browsers:
https://developer.mozilla.org/en-US/docs/Web/CSS/
@supports
P O L Y F I L L S

32. . W R A P P E R
C E L L /
. C O L - 1
C E L L /
. C O L - 2
C E L L /
. C O L - 3
C E L L /
. C O L - 4
<div class=“wrapper”>
<div class=“col-1”></div>
<div class=“col-2”></div>
<div class=“col-3”></div>
<div class=“col-4”></div>
</div>

33. . W R A P P E R
.wrapper {
display: grid;
grid-gap: 10px;
}
C E L L /
. C O L - 1
C E L L /
. C O L - 2
C E L L /
. C O L - 3
C E L L /
. C O L - 4

34. . W R A P P E R
.col-1 {
grid-column: 1 / 2;
}
.col-2 {
grid-column: 2 / 3;
}
.col-3 {
grid-column: 3 / 4;
}
C E L L /
. C O L - 1
C E L L /
. C O L - 2
C E L L /
. C O L - 3
C E L L /
. C O L - 41 2 3 4 5

35. .col-1 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.col-2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.col-3 {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
. W R A P P E R
C E L L /
. C O L - 1
C E L L /
. C O L - 2
C E L L /
. C O L - 3

36. • Named grid template areas (header, footer, etc):
http://gridbyexample.com/examples/#example11
A L T E R N A T E S Y N T A X

37. . W R A P P E R
A S I D E
H E A D E R
A R T I C L E
R E O R D E R I N G
<div class=“wrapper”>
<header></header>
<article></article>
<aside></aside>
</div>

38. . W R A P P E R
A S I D E
H E A D E R
A R T I C L E
R E O R D E R I N G
Show code in GitHub!
reordering.html
reordering.css
https://github.com/jen4web/cssgrid

39. C O D E E X A M P L E
www.github.com/jen4web/cssgrid

40. • CSS Tricks:
https://css-tricks.com/snippets/css/complete-guide-grid/
• Grid by Example: http://gridbyexample.com/
• Practical CSS Grid: Adding Grid to an Existing Design
https://alistapart.com/article/practical-grid
• Basic concepts of grid layout
https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
• CSS Grid Inspector (in Firefox):
https://developer.mozilla.org/en-US/docs/Tools/
Page_Inspector/How_to/Examine_grid_layouts
R E C O M M E N D E D R E S O U R C E S

41. • Need browser support? Can’t go wrong with floats.
• It’s time to learn Flexbox if you haven’t already. PS –
it’s in Bootstrap 4. Get used to it.
• You can start using CSS Grid now, if used with browser
fallbacks.
• Realistically, plan for another year before you use Grid
on most websites.
C U R R E N T R E C O M M E N D A T I O N S

42. Q U E S T I O N S ?
Jen Kramer
Arlington, MA, USA
Phone: 802-257-2657
jen@jenkramer.org
www.jenkramer.org
Twitter: @jen4web
Facebook: facebook.com/webdesignjen