What about supporting browsers without support of flexbox?

[f]

Should we support browsers with no support of flexbox? Seems IE 9 and 8 does not have support for flexbox. Maybe we can fallback to table view with columns:

<table>
  <tr>
    <td class="bricklayer-column">items..</td>
    <td class="bricklayer-column">items..</td>
  </tr>
</table>

@ademilter If you think supporting this is not required and will be overkill for its simplicity, we can just do not support.

PS. Calculating height of table columns may have problems and we can have problems with responsiveness.

[nicooprat]

I think you could also remove use of display: flexbox completely (which seems to be useful only to align items horizontally in this case):

.bricklayer {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0;
}

.bricklayer-column {
  display: table-cell;
  vertical-align: top;
}

[f]

@nicooprat You're right. We are working on supporting older browsers via fallbacks. At first we planned to make it work with modern browsers.

My question is (I did not try) if I can calculate heights of column cells. I guess table cells have same heights in one row which breaks the main logic of bricklayer.

[nicooprat]

Right, didn't think of that. All columns have the same height, but it may exist a way to get their "natural" height (without calculating the sum of all of their children heights):

Here's what the Chrome console indicates. Height is 680px but it looks like there's an intrinsic padding-bottom added. Couldn't find a way to calculate its value however...

[f]

This strange padding is because of table-layout: fixed I guess.

Calculating sum of children heights is the first idea I had, but sounds "heavy" when you think of loads of items in a column. We already want a very simple implementation.

If you find a way to get natural height with minimal calculation please let us know or PR would be more awesome :)

[nicooprat]

Seems not possible with table cells. But a workaround to get a column "natural" height without too much computation could be to compare the column getBoundingClientRect().top and its last child getBoundingClientRect().bottom?

[zippex]

Just a short note: please don't forget the new Edge Browser on Windows 10 and Windows 10 Mobile. At the moment Bricklayer does not work on Edge.

[meritel]

@zippex is right, support on Windows 10 would be nice.
Seems to be the same problem than on ie > ":scope"