The columns CSS property is a shorthand property allowing to set both the column-width and the column-count properties at the same time.
The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element.
The column-width CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns. This allows us to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.
The CSS multi-column layout extends the block layout mode to allow the easy definition of multiple columns of text. People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.
The column-count CSS property describes the number of columns of the element.
The column-fill CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs.
The column-gap CSS property sets the size of the gap between columns for elements which are specified to be displayed as multi-column elements.
In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color.
The column-rule-color CSS property lets you set the color of the "rule" or line drawn between columns in multi-column layouts.
The column-rule-style CSS property lets you set the style of the rule drawn between columns in multi-column layouts.
The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.