1. The multicolumn
challenge:
ACCEPTED!
Lorena Ramonda,
CSSDay 2017, Faenza

2. lorena.ramonda.me
@mobiledesignah
github.com/lorenaramonda
Lorena Ramonda
Front end developer @
Progressive enhancement lover
Semantic structures and cleanliness of code fan
Interested about accessibility

3. Creating a multicolumn layout
techniques + performance + compatibility

4. columns and rows (lots of)

5. layout 3 columns full height

6. Techniques
Challenge # 1

7. 1 - Tables
<table class="layout">
<tr>
<td class="left-col">
...
</td>
<td class="center-col">
...
</td>
<td class="right-col">
...
</td>
</tr>
</table>
.layout {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.layout td {
width: 33.3333%;
vertical-align: top;
}
Grid

8. 1 - Tables
<table class="layout">
<tr>
<td class="left-col">
...
</td>
<td class="center-col">
...
</td>
<td class="right-col">
...
</td>
</tr>
</table>
.layout {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
min-height: 100vh;
}
.layout td {
width: 33.3333%;
vertical-align: top;
}
Columns with same height

9. 2 - Div display:table
<div class="layout">
<div class="row">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
</div>
.layout {
display: table;
width: 100%;
}
.layout > .row {
display: table-row;
margin-bottom: 1em;
}
.layout > .row > div {
display: table-cell;
width: 33.3333%;
}
Grid

10. 2 - Div display:table
<div class="layout">
<div class="row">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
</div>
.layout {
display: table;
width: 100%;
min-height: 100vh;
}
.layout > .row {
display: table-row;
margin-bottom: 1em;
}
.layout > .row > div {
display: table-cell;
width: 33.3333%;
}
Columns with same height

11. 3 - Div floated
<div class="layout">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout:before, .layout:after {
content: '';
display: table;
height: 0;
clear: both;
}
.layout > div {
float: left;
width: 33.3333%;
}
Grid

12. 3 - Div floated
<div class="layout">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout:before, .layout:after {
content: '';
display: table;
height: 0;
clear: both;
}
.layout > div {
float: left;
width: 33.3333%;
min-height: 100vh;
}
Columns with same height

13. 3 - Div floated
<div class="layout" id="fullpage">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout:before, .layout:after {
content: '';
display: table;
height: 0;
clear: both;
}
.layout > div {
float: left;
width: 33.3333%;
min-height: 100vh;
}
Columns with same height
var parent = document.getElementById('fullpage');
parent.querySelectorAll('div').forEach( function (e) {
e.style.height = parent.offsetHeight + 'px';
});
Needs JavaScript

14. 4 - CSS3 Flexbox
<div class="layout">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout {
display: flex;
flex-wrap: wrap;
}
.layout > div {
flex: 1 1 33.3333%;
}
Grid

15. 4 - CSS3 Flexbox
<div class="layout">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout {
display: flex;
flex-wrap: wrap;
min-height: 100vh;
}
.layout > div {
flex: 1 1 33.3333%;
}
Columns with same height
Yay! It already works!

16. 5 - CSS3 Grid
<div class="layout">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout {
display: grid;
grid-template-columns: 33.33333% 33.33333%
33.33333%;
}
Grid

17. 5 - CSS3 Grid
<div class="layout">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout {
display: grid;
grid-template-columns: 33.33333% 33.33333%
33.33333%;
min-height: 100vh;
}
Columns with same height
Yay! It already works!

18. 6 - CSS3 Columns
<div class="layout">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout {
-moz-column-count: 3;
column-count: 3;
column-gap: 0;
}
.layout div {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
Grid

19. 6 - CSS3 Columns
<div class="layout">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout {
-moz-column-count: 3;
column-count: 3;
column-gap: 0;
}
.layout div {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
min-height: 100vh;
}
Columns with same height

20. 6 - CSS3 Columns
<div class="layout" id="fullpage">
<div class="left-col">
...
</div>
<div class="center-col">
...
</div>
<div class="right-col">
...
</div>
</div>
.layout {
-moz-column-count: 3;
column-count: 3;
column-gap: 0;
}
.layout div {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
min-height: 100vh;
}
Columns with same height
var parent = document.getElementById('fullpage');
parent.querySelectorAll('div').forEach( function (e) {
e.style.height = parent.offsetHeight + 'px';
});
Needs JavaScript

21. Challenge # 1 - Techniques - WRAPPING UP
Table Div display:table Div floated
CSS3 Flexbox CSS3 Grid CSS3 Columns

22. Testing a multicolumn layout

23. “The browser reacts to CSS properties changes. They don’t always require the
same amount of work on layout, painting and compositing thus choosing different
kind of changes impacts on rendering performance.”
~ Chris Coyer

24. How I measured page performance
Chrome Developer Tool & others

25. Page rendering
Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm
HTML parse
CSS parse
Attachment
loading
DOM

26. Page rendering
Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm
HTML parse
CSS parse
Attachment Layout
rendering
loading
DOM

27. Page rendering
Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm
HTML parse
CSS parse
Attachment Layout CompositingPainting
rendering painting
loading
DOM

28. csstriggers.com

30. Collecting data
Average among 4 collecting sessions divided in:
no CPU throttling
high end device
low end device
Windows
Linus
Mac

31. Performance
Challenge # 2

32. No CPU
High end
Low end
AVERAGE
TOTAL AVERAGE in ms
6) CSS3 Columns
824,45 289,625 592,275
1647,225 952,45 1057,125
4367,425 1570,575 1736,575
2.279,70 937,55 1.128,66
1448,636111

33. No CPU
High end
Low end
AVERAGE
TOTAL AVERAGE in ms
5) Div display:table
625,225 186,3 477,175
1262,525 359,3 875,3
3255,775 880,5 1347,475
1.714,51 475,37 899,98
1029,952778

34. No CPU
High end
Low end
AVERAGE
TOTAL AVERAGE in ms
4) CSS3 Grid
490,45 194,3 443,6
1124,6 357,925 823,175
2731,525 845,875 1334,6
1.448,86 466,03 867,13
927,3388889

35. No CPU
High end
Low end
AVERAGE
TOTAL AVERAGE in ms
3) Div floated
503,1 207,15 420,325
1099,15 362,675 864,575
2571,15 832,825 1382,975
1.391,13 467,55 889,29
915,9916667

36. No CPU
High end
Low end
AVERAGE
TOTAL AVERAGE in ms
2) Table
521,95 160,4 408,875
1053 306,975 727,25
2605,175 769,675 1188,2
1.393,38 412,35 774,78
860,1666667

37. No CPU
High end
Low end
AVERAGE
TOTAL AVERAGE in ms
1) CSS3 Flexbox
441 164 400,575
812,6 303,175 760,825
2495,275 741,825 1165,775
1.249,63 403,00 775,73
809,45

38. Challenge # 2 - Performance - WRAPPING UP
Table Div display:table Div floated
CSS3 Flexbox CSS3 Grid CSS3 Columns

39. Compatibility
Challenge # 3

40. Table
Since HTML 3.2
Styled inline because CSS wasn’t out yet

41. Div floated
Since HTML 4.0
CSS introduction (finally!)

42. Div display:table

43. CSS3 Columns

44. CSS3 Flexbox

45. CSS3 Grid

46. Table Div display:table Div floated
CSS3 Flexbox CSS3 Grid CSS3 Columns
Challenge # 3 - Compatibility - WRAPPING UP

47. Table Div display:table Div floated
CSS3 Flexbox CSS3 Grid CSS3 Columns
Conclusion

48. Thanks for listening
and to
Fabio Gollinucci for suggesting testing tools and helping testing
Irene Iaccio, Federica Villata and Antonio Carboni for the inspiration
Alessandro Ronchi for mentoring
and
Bitbull and From the Front community for support encouraging

49. Any questions?
RESOURCES:
slideshare.net/lorenaramonda/the-multicolumn-challenge-accepted
github.com/lorenaramonda/multicolumn-challenge
—
lorena.ramonda.me ~ lorena@ramonda.me
bitbull.it
@mobiledesignah