Column Properties

CSS columns

CSS columns are a simple way to add flexible text columns to your pages. This is useful when using a responsive design because the width of your container element can change. Manual solutions require that the text be a certain length and stay in one element, artificially splitting the text into multiple tags, based on spacing rather than on content. CSS columns allow you to split the content into multiple columns without worrying about where the column splits happen, making them more flexible and responsive.

Apocalyptic columns

column-count: This sets the number of desired columns. While use cases will vary, it is recommended to stick to a max of three columns unless you have a super-wide screen or a compelling reason. Shorter line lengths often make reading easier, but if you go too short, your eye jumps too much between lines, tiring the reader. Too many columns also increase visual distractions, making it more difficult for the reader to focus on the content.

.horde-layout-columns {
    column-count: 3;
}

Experiments to try:

1. Change the column count to 2.
2. Now, try 7.
3. Does it accept 0 or a negative number? What about 100?