Multi-column layouts have not been used to their full potential, mostly because once content exceeded a limit, multi-column would force a horizontal scroll. It’s unintuitive and a UX no-no, especially on the modern web where the default scroll is vertical.

Take the following case for example:

CodePen Embed Fallback

The CSS code for that might look something like this:

body { max-width: 700px; }

.article { column-gap: 10px; column-count: 3; height: 350px; }

When the content size exceeds the body container, multi-column creates additional columns and a horizontal scroll.…