CSS3 columns Easy-to-use columnar layout

CSS provides a style description for the HTML markup language that defines how elements are displayed. CSS is a breakthrough in the field of web design. It enables you to modify all the page elements associated with a small style update. CSS has always been a headache for us, is the creation of layout is very troublesome. Of course, there are many ways, there are many techniques can create a variety of layouts, but we always feel that CSS should provide some new properties, so that we can better manage the layout. Fortunately, CSS3 provides a new set of column properties for creating a row layout, and with these properties, we don't need to use attributes such as float,clear,margin to regulate and avoid a lot of trouble.

CSS Code

The column series properties in CSS3 provide a variety of features that you can use to combine them, and you'll get any of the corresponding column layouts:

Column-count: Number of columns

Column-gap: Gap width between columns

Column-width: Recommended width, not necessarily used, the browser calculates based on this value

Column-rule-width: Dividing line widths between columns

Column-rule-style: Split line style between columns

Column-rule-color: Split Line between columns demo

Column-span: Allows the width of an element to span multiple columns

Column-fill: Breakdown by Type

To create a nice, columnar layout, you need at least Column-count and Column-gap:

/* 3 columns, 10px spacing between each column */ul.col-3 {

column-count:3;column-gap:10px;}

If you want to beautify the gap between the following, this is also very simple:

/* 3 columns, 10px spacing between each column, with a gold isolation line */ul.col-3 {

column-count:3;column-gap:10px;column-rule:1px solid #fc0;}

The specified element can also span multiple columns:

/* Take the following HTML as an example:

<div>
*/div.col-3 {column-count:3;column-gap:5px;} Div.col-3 H2 {column-span:all;text-align:center;background: #eee;}
It's very simple, and the results are exactly what we expected!

Using CSS3 's columns to make a page layout has many advantages: you don't need to calculate the width, you don't have to worry about whether the content will burst or not, and the math problem system will help you calculate it. There is another, and that is the semantics of clarity and neatness.

 The above content is about CSS3 columns production page layout, hope to be helpful to everyone.