About: Column Support in HTML

Columns using CSS3

CSS3 introduced a new columns style to automatically create columns.

<div style="column-count:3"> <!--Any number of regular DOM elements--> <article>Element 1</article> <article>Element 2</article> <article>Element 3</article> <article>Element 4</article> <article>Element 5</article> <article>Element 6</article> <article>Element 7</article> </div>

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.

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7

Columns using <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.

<ordered-columns count="3"> <!--Any number of regular DOM elements--> <article>Element 1</article> <article>Element 2</article> <article>Element 3</article> <article>Element 4</article> <article>Element 5</article> <article>Element 6</article> <article>Element 7</article> </ordered-columns>

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.

Notice that content rendered using 3 columns:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Will have a different order than when rendered using only 2 columns:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7