Column Properties
Explore how to use CSS columns to divide content into multiple flexible columns that adjust to your layout's size. Understand key properties such as column-count, column-gap, column-rule, and column-span to manage text flow and styling. Practice adjusting column widths and rules to enhance readability and create visually balanced multi-column designs that adapt to different screen sizes.
We'll cover the following...
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 ...