CSS3 multi-column layout

Using CSS3, where you can divide the text content of an element into multiple columns.

Create multi-column layout

CSS3The multi-column layout module has been introduced to create multiple column layouts in a simple and effective way. Now, you can create layouts like those seen in magazines and newspapers without using float boxes. This is a layout using CSS3A simple example of the multi-column layout feature, which divides some text into three columns.

p {
　　　　-webkit-column-count:　3;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-count:　3;　/*　Firefox　*/
　　　　　　　　　　　　column-count:　3;　
}

sets the number of columns or width

CSS property, 'column'-count and 'column'-width specifies whether and how many columns will be displayed. 'column'-The 'count' attribute sets the number of columns within a 'multicol' element, while the 'column'-The 'width' attribute sets the required column width.

p {
　　　　-webkit-column-width:　150px;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-width:　150px;　/*　Firefox　*/
　　　　　　　　　　　　column-width:　150px;　
}

to set the column gap

You can use the column-The gap property specifies the space between columns. The same gap is applied between each column. The default gap is normal, which is equal to1em.

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
}

to set the column rule

You can also use column-The rule property adds a line, that is, a rule, between columns. It is a shorthand property used to set the width, style, and color of the rule in a single declaration. The column-The rule property takes the same values as border and outline.

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule:　2px solid red;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule:　2px solid red;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule:　2px solid red;
}

CSS3Multi-column Properties

The following table briefly summarizes all multi-column properties: