Columns are a nice way to avoid over-long lines of text, and still make use of extra horizontal space. However when there is much more text than will fit in the viewport, having to either scroll horizontally, or from the bottom of one column way back up to the top of the next don't seem like ideal solutions.
Is it possible to A) set a max-height on columns (not the containing element) and B) have columns wrap beneath the previous columns when they exceed the container's width, rather than continuing horizontally?
For example:
<div class="content-in-columns">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at sem eget massa consectetur dignissim. Proin euismod tincidunt ante ut varius. Vivamus eu pellentesque ante. Etiam porttitor condimentum nunc. Sed libero nisi, efficitur sed neque ut, vestibulum iaculis augue. Praesent in finibus nisl, vitae ullamcorper magna. Sed pretium tellus felis, non ullamcorper orci ultricies et. Proin eros lacus, laoreet ac viverra in, imperdiet id nunc. Suspendisse leo augue, tempus at pharetra eget, ultrices sed massa. Donec nisl tortor, dapibus auctor arcu a, venenatis congue nulla. Vivamus vitae blandit arcu. Sed varius vel turpis non vulputate. Donec id imperdiet mauris. Integer malesuada eros sit amet est congue varius. Etiam porttitor sapien elit, nec cursus sapien semper id.
<!-- Many more screens' worth of text, etc etc -->
</div>
.content-in-columns {
width: 100vw;
max-width: 100vw;
column-width: 50%;
/* Imagined rules */
column-max-height: 100vh;
column-wrap: wrap;
}
will result in two very tall columns, like this:
+---+---+
| 1 | 2 |
| | |
| | |
| | |
| | |
| | |
+---+---+
I'd instead like that example to produce an arbitrary number of columns, half the viewport width and at most the same height as the viewport, paired up so the reader can scroll vertically through:
+---+---+
| 1 | 2 |
| | |
+---+---+
| 3 | 4 |
| | |
+---+---+
| 5 | |
| | |
+---+---+
Or, can a similar effect be had with other tools such as grid or flexbox?
