CSS3 Multi-Column layout

In the multi-column layout, the use of bootstrap grid system can be very easy to achieve the effect, in fact, CSS3 itself also provides the function of the Dolan layout.

For example, we populate a tag with a section lot of content, and want the content to be displayed in three columns, you can use the following CSS to implement ( using Chrome browser ).

Set the number of columns

section {  -webkit-column-count:3;}

According to the width of the column

section {  -webkit-column-width:25rem;}

rem In contrast em , the font size it represents is relative to the global.

If you can display some markup in the column gap, the page will look more beautiful and its implementation is very simple.

Defining the compartment gap

section {  -webkit-column-width:25rem;  -webkit-column-rule:3px solid #8B2101;  -webkit-column-gap:2rem;

It column-rule can be split into the following rules:

• column-rule-width: 3px;
• column-rule-style: solid;
• column-rule-color: #8B2101;

If you do not define the height of the column, the content is evenly distributed, but if you specify a height, you can also perform a column fill.

How column contents are filled

section {  column-width:20rem;  column-rule:3px solid #8B2101;  Column-gap:2rem;  Height:85rem;  Column-fill:balance;}

column-fillIn addition to the value balance , there is another valueauto

How to Hurdle

In the table we can use colspan=2 to configure the content extension of the number of columns, of course, the contents of the column can also be implemented as follows.

Section img {   column-span:all;   Margin:1rem Auto;}

Other features

Tell the browser where you want to start the column.

Break-before

Auto\always\avoid\column\avoid-column

Break-after

Auto\always\avoid\column\avoid-column

Break-inside

Auto\always\avoid\column\avoid-column

Reference

"CSS real-combat development and design"