1. Home
  2. CSS3 columns property

The best CSS3 columns property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Attribute definitions and instructions,grammar,More examples,related articles,

CSS3 columns property

Examples

Specifies the width and number of columns:

div
{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}


In the bottom of this page for more examples.

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

属性
columns 50.0
4.0 -webkit-		 10.0 9.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1

Attribute definitions and instructions

Columns property is a shorthand property to set the column width and number of columns.

Defaults: auto auto
inherit: no
version: CSS3
JavaScript syntax: object .style.columns = "100px 3"

grammar

columns: column-width column-count;

value description
column-width Column width
column-count Number of columns

Examples

More examples

Column-count
Text div element into three columns.

Column-gap
Text in the div element into three columns, and specify the gap between the columns of a 30 pixel.

Column-rule
Rules specify between columns: width, style and color.

related articles

CSS3 tutorial: CSS3 Multiple the Columns

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS3 columns property
10/30