The multicolumn challenge: accepted!

The multicolumn challenge: ACCEPTED!

Lorena Ramonda,CSSDay 2017, Faenza

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

Creating a multicolumn layouttechniques + performance + compatibility

columns and rows (lots of)

layout 3 columns full height

TechniquesChallenge # 1

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

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

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

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%;}


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

3 - Div floated



.layout > div { float: left; width: 33.3333%; min-height: 100vh;}


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 > div { float: left; width: 33.3333%; min-height: 100vh;}


var parent = document.getElementById('fullpage');parent.querySelectorAll('div').forEach( function (e) { e.style.height = parent.offsetHeight + 'px';});

Needs JavaScript

4 - CSS3 Flexbox


.layout { display: flex; flex-wrap: wrap;}

.layout > div { flex: 1 1 33.3333%;}

Grid

4 - CSS3 Flexbox


.layout { display: flex; flex-wrap: wrap; min-height: 100vh;}

.layout > div { flex: 1 1 33.3333%;}


Yay! It already works!

5 - CSS3 Grid


.layout { display: grid; grid-template-columns: 33.33333% 33.33333% 33.33333%;}

Grid

5 - CSS3 Grid


.layout { display: grid; grid-template-columns: 33.33333% 33.33333% 33.33333%; min-height: 100vh;}


Yay! It already works!

6 - CSS3 Columns


.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

6 - CSS3 Columns



.layout div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; min-height: 100vh;}


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 div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; min-height: 100vh;}


var parent = document.getElementById('fullpage');parent.querySelectorAll('div').forEach( function (e) { e.style.height = parent.offsetHeight + 'px';});

Needs JavaScript

Challenge # 1 - Techniques - WRAPPING UP

Table Div display:table Div floated

CSS3 Flexbox CSS3 Grid CSS3 Columns

Testing a multicolumn layout

“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

How I measured page performanceChrome Developer Tool & others

Page rendering

Reference: http://taligarsiel.com/Projects/howbrowserswork1.htm

HTML parse

CSS parse

Attachmentloading

DOM

Page rendering


HTML parse

CSS parse

Attachment Layout

rendering

loading

DOM

Page rendering


HTML parse

CSS parse

Attachment Layout CompositingPainting

rendering painting

loading

DOM

csstriggers.com

Collecting data

Average among 4 collecting sessions divided in:

no CPU throttlinghigh end devicelow end device

WindowsLinusMac

PerformanceChallenge # 2

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

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

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

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

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

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

Challenge # 2 - Performance - WRAPPING UP



CompatibilityChallenge # 3

Table

Since HTML 3.2

Styled inline because CSS wasn’t out yet

Div floated

Since HTML 4.0

CSS introduction (finally!)

Div display:table

CSS3 Columns

CSS3 Flexbox

CSS3 Grid



Challenge # 3 - Compatibility - WRAPPING UP



Conclusion

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

Any questions?

RESOURCES:

slideshare.net/lorenaramonda/the-multicolumn-challenge-accepted

github.com/lorenaramonda/multicolumn-challenge

—

lorena.ramonda.me ~ [email protected]

bitbull.it

@mobiledesignah

Presentations & Public Speaking

The multicolumn challenge: accepted!