I recently came accross a novel use for column-count: #;
The idea is to have a master element have the property “column-count:2;” , a child element with a height of 200%, and one column grid of elements filling the space.
The result is a 2 column grid, within which any elements which spill out of the bottom of the left column extend seamlessly into the second column! Even images!
But in my endeavors to create the experience I want (user adds and removes resizable objects from the grid). I’ve encountered some inconsistencies across browsers. For example, in chrome, an element placed using jquery >100% from the top of the child element appears in the second column. But in firefox, the element spills the page.
To complicate matters, in chrome, if one element is added, and then another, which is then resized past the end of the first column, it doesn’t wrap… until the original element is resized – even if n more elements are added and resized. However, pointer events act as if the element had wrapped… but it’s not visible.
So how does this work? Can I use -webkit, -moz, or hacks for more consistent behavior? Or on the more extreme end of solutions, could I custom build a similar effect using <canvas> or another programming language?
