CSS3 introduced a new columns
style to automatically create columns.
However, CSS columns follow a simple fill order based on the order of elements in the DOM, forcing a left-to-right flow, rather than a vertical flow.
<ordered-columns>
All elements inlined into a <ordered-columns>
web component are automatically reordered
in the DOM to fill columns vertically. This is similiar to how rows are filled into a table, but with no gaps between rows, and even multiple elements per row.
This creates a more vertical representation of data, so that earlier elements are always positions closer to the top of the page than older elements.
This approach is common for timelines or news feeds.
While it is possible to manually order DOM elements to achieve a vertical flow, it can only be
done when the render size of the content is static or known during page creation.
Dynamic content, or varying the number or width of columns at runtime (say based on screen resolution) will require DOM element reordering.