CSS3 layout Style

1. Multi-Column Layout--columns

In order to make it easy to implement a multi-column layout like newspaper and magazine in a Web page, the CSS3 added a multi-column layout module (CSS Multi. It is mainly used in the multi-column layout of text.

Columns:<column-width><column-count>

Parameters	Parameter description
<column-width>	Used primarily to define the width of each column in multiple columns
<column-count>	Used primarily to define the number of columns in multiple columns

2.column-width

The use of Column-width is the same as the Width property in CSS, except that the Column-width property can be used alone or in conjunction with other properties in a multicolumn property when defining the column width of the element. Its basic syntax is as follows;

< length >

Property value	Description
Auto	If Column-width sets the value to auto or does not have an explicit setting, the column widths of the elements will be determined by other properties, such as the previous example being determined by the number of columns Column-count.
<length>	Use a fixed value to set the width of the element column, which is mainly composed of numeric and length units, although its value can only be positive and cannot be negative.

3.column-count

The Column-count property is primarily used to specify the desired number of columns and the maximum number of columns allowed for an element. Its syntax rules:

< integer >

Property value	Property Value Description
Auto	This value is the default value of Column-count, which indicates that the element has only one column, which relies primarily on the browser to calculate the automatic settings.
<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.

4.column-gap Spacing

The column-gap is used primarily to set the spacing between columns, with the following syntax rules:

< length >

Column-gap:2em;

Property value	Property Value Description
Normal	The 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.

5.column-rule

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. However, Column-rule does not occupy any spatial position, and changing its width between columns and columns does not change the position of any columns.

Column-rule:<column-rule-width>| < Column-rule-style >| < Column-rule-color >

column-rule:2px dotted green;

Property value	Property Value Description
Column-rule-width	Similar to the Border-width property, which is used primarily to define the width of the column border, the default value is "Medium", and the Column-rule-width property accepts any floating-point number but does not receive a negative value. But also like the Border-width property, you can use keywords: medium, thick, and thin.
Column-rule-style	Similar to the Border-style property, which is used primarily to define the column border style, with the default value "None". The Column-rule-style property value is the same as the Border-style genus, including none, hidden, dotted, dashed, solid, double, groove, Ridge, inset, outset.
Column-rule-color	Similar to the Border-color property, which is used primarily to define the column border color, whose default value is the value of the foreground color, which is equivalent to Border-color. The Column-rule-color accepts all colors. If you don't want the color to appear, you can also set it to transparent (transparent color)

6.column-span Cross-column

Column-span is used primarily to define how many sub-elements in a column element can span columns. Column-width, Column-count and other attributes allow one element to be divided into multiple columns, regardless of how the elements are emitted in order, they are left-to-right content, but sometimes we need a piece of content in the base or a title not to be broken down, that is, across all the columns, Column-span can be easily implemented at this point, and the syntax for this property is as follows.

Column-span:none | All

Property value	Property Value Description
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.

CSS3 layout Style