CSS3 has a really neat feature called multiple columns. Multiple columns are really great for splitting up text for a responsive website. They are just one of those things good web developers should use to cut down on unnecessary scripting, because the alternative is to uniquely position and style multiple <div> tags and separate the text yourself.
Using multiple columns also offers far superior flexibility when designing a website. They allow customization of the style of borders in-between the columns, the amount of columns, and nearly everything else a web designer could possibly want to change with very little scripting.
Here is a demo that shows how to set up a multiple column <div> and how to customize it.
To begin, create a <div> tag with an id of “columnContainer” and fill it with some placeholder text.
HTML:
Next specify a column count for #columnContainer in your CSS file, then add the equivalent versions for webkit based browsers and firefox.
CSS:
Result:
That was so easy. With barely any CSS that created responsive, column divided text! The best part is how easily it can be customized from there.
Multiple columns provides the functionality to style dividers in between the text in a similar fashion to CSS borders. Specify the width, consistency, and color of the divider to get a finished result. We’ll also add another column to better show the column-rule’s effect.
Here is the updated CSS:
Result:
Finally, multiple columns is able to update the spacing in between each column with another simple feature. Just specify a column-gap for the text to easily change that spacing.
CSS:
Result:
See how easy it is to create something beautiful in just a few minutes? It is a really nice addition to CSS which every developer should use when possible.
Here is a link to the code: https://jsfiddle.net/MorganMeliment/hg3reu36/