Css3-) Multi-Column Layout

During Multi-bar layout, the bootstrap raster system can easily achieve the effect. In fact, css3 also provides the multi-lan layout function.

For examplesectionThe label is filled with a lot of content, and you want the content to be displayed in three columns, you can use the following css to implement (Use chrome).

Set the number of Columns

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

Split columns by width

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

WhereremAndemThe font size is relative to the global one.

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

Define column gap

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

Wherecolumn-ruleIt can be split into the following rules:

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

If you do not define a columnHeight, The content will be evenly distributed, but if the height is specified, you can also perform the column filling method.


Fill mode of column content

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

column-fillExceptbalance, There is another valueauto


How to cross-bar

In the table, we can usecolspan=2To configure the number of columns for content extension, of course, the column content can also be achieved through the following method.

section img {   column-span: all;   margin: 1rem auto;}


Other features
Tell the browser where you want to start partitioning.

Break-beforeauto \ always \ avoid \ column \ avoid-columnbreak-afterauto \ always \ avoid \ column \ avoid-columnbreak-insideauto \ always \ avoid \ column \ avoid-column

Reference

CSS Development and Design