# Multi-column manipulation

DevFeed: [Multi-column manipulation](<https://devfeed.tech/articles/multi-column-manipulation-31225.md>)

Original publisher: [Read original article](<https://every-layout.dev/blog/multi-column-manipulation/>)

Author: Heydon Pickering

Published: 2019-07-20T00:00:00Z

Content type: tutorial

Language: en

Sources: [The Every Layout Blog](<https://devfeed.tech/sources/the-every-layout-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [developer-tools](<https://devfeed.tech/tags/developer-tools.md>), [example](<https://devfeed.tech/tags/example.md>), [interaction](<https://devfeed.tech/tags/interaction.md>), [layout](<https://devfeed.tech/tags/layout.md>)

## AI overview

An exploration of CSS Multi-column Layout, focusing on its unusual horizontal or vertical overflow behavior and the interaction challenges of horizontal scrolling. It also demonstrates quantity-dependent columns that split long bullet lists into two columns when they contain at least five items.

## Source excerpt

Despite predating both Grid and Flexbox, Multi-column Layout represents--at least to me--an even more radical departure from the way we normally do and think about CSS layout. Dividing just one element into a multi-column representation of its contents feels weird, heretical even. Setting a multi-column context means asking (flow) content to progress, by column, in a horizontal direction. This invokes one of two issues, depending on whether you set a height on the element. With no set height, there's no limit to the height of the columns. This will result in vertical overflow, and the necessity to scroll down and up the page to read each successive column. Many are likely to find this arduous. With a set height, columns are forced to spawn in the inline (horizontal) direction, creating horizontal overflow. Setting overflow: auto frames this correctly. .columns { height: 25vh; /* ↓ columns defined by width */ columns: 30ch; overflow: auto; } However, despite the increasing popularity of scrolling menus and other such patterns harnessing horizontal scrolling, it is still an unconventional interaction paradigm -- and unconventional patterns are liable to be misapprehended by users. There are ways to increase perceived affordance, of course--perhaps by adding some custom styling to the scrollbar (-webkit-scrollbar), or providing some overflow-dependent shadows. But this may not be enough. Quantity-dependent columns One thing I have been experimenting with is the application of multiple columns in response to content quantity. Let's say I have a bullet list, and let's assume each bullet point is likely to be relatively short; no more than a sentence. There's no benefit to dividing the list into columns when there are only a few points. But the overall height of the list is shortened (and the chance of the reader being able to see the whole list without scrolling is increased) when a long list is divided into two. In the following example, the list is split into two columns w