Columns Properties--Multi-column layout

COLUMNS[ˈKⱭ:LƏM] Multi-column layout
The properties or sub-properties associated with it are as follows

One, columns integrated Column-width and Column-count two properties

Column-width defines the width of each column column
The property values are as follows:
1, auto default value, adaptive

2. The length value sets the width of the column. The column widths here are functionally equivalent to the minimum width

III. column-count Definition column number
The property values are as follows
1, auto default value, adaptive. Depending on the window width and column-width settings, you decide to display several columns.
2. Set the number of columns. The number of columns here is equivalent to the maximum number of columns, depending on whether column-width is used

Adaptive, or use a length value.

Iv. column-gap Defining column Spacing

V. Column-rule defining the split line in the middle of each column
The column edges do not affect the layout (functionally similar to contour outline), which adjusts itself to show whether the layout is scaled.

The above 5 properties are frequently used multi-column layout properties

Vi. Column-span define multi-column layout neutron element cross-column effect, Firefox does not support, only Chrome and Opera support Column-span properties.
This feature is similar to the colspan property of the Table element <table> column element <td>, which you can use to set the article title (across
All columns)
The property values are as follows
1, none default value, means no cross-column

2. All means across all columns

Note: The Column-span property must be used in block-level elements, and will not have any effect if used in the inline element

Seven, Column-fill control the sizing effect of each column, mainstream browser does not support

Note: Multi-column Layout properties CSS3 standard format support is low, please precede the standard format with a prefixed style