CSS3 Multi-Column layout

one, multi-column layout--columns
Grammar:columns:<column-width> | | <column-count>
1, Column-width: Mainly used to define the width of each column in multiple columns Column-width:auto | <length>
Length: Sets the width of the element column with a fixed value, which is primarily composed of numeric and length units, although its value can only be positive and cannot be negative.
2, Column-count: Mainly used to define the number of columns in multiple columns Column-count:auto | <integer>
integer: This value is a positive integer value that is used primarily to define the number of columns of an element, which is an integer greater than 0, and the negative value is invalid.
Example: columns:200px 2;
3, column spacing Column-gap
Syntax: column-gap:normal | | <length>
The normal default value is 1em (if your font size is PX, its default value is your Font-size value).
Length: This value is used to set the distance between the column and columns, which can use any integer value of the Px,em unit, but cannot be a negative value.
example: column-gap:2em;
4. List Border Column-rule
definition: Column-rule is primarily used to define the border width, border style, and border color between columns.
simply put, it's a bit like the usual border property. But Column-rule is not occupying any space,
changing its width between columns and columns does not change the position of any columns.
Grammar:column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
Example: column-rule:2px dotted green;
5. Cross-column Settings Column-span
definition: Column-span is used primarily to define how many child elements in a column element can span columns.
Syntax: Column-span:none | all
None: This value is the default value of Column-span, which means that no columns are spanned.
All: This value is exactly the opposite of the none value, which means that the element spans all columns and is positioned above the z axis of the column.
for example: Column-span:all;

CSS3 Multi-Column layout