Column property in css

CSS Multiple Columns

The CSS multi-column layout allows easy definition of multiple columns of text — just like in newspapers:

Daily Ping

Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

CSS Multi-column Properties

In this chapter you will learn about the following multi-column properties:

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
column-count	50.0	10.0	52.0	9.0	37.0
column-gap	50.0	10.0	52.0	9.0	37.0
column-rule	50.0	10.0	52.0	9.0	37.0
column-rule-color	50.0	10.0	52.0	9.0	37.0
column-rule-style	50.0	10.0	52.0	9.0	37.0
column-rule-width	50.0	10.0	52.0	9.0	37.0
column-span	50.0	10.0	71.0	9.0	37.0
column-width	50.0	10.0	52.0	9.0	37.0

CSS Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into.

The following example will divide the text in the element into 3 columns:

Example

CSS Specify the Gap Between Columns

The column-gap property specifies the gap between the columns.

The following example specifies a 40 pixels gap between the columns:

Example

CSS Column Rules

The column-rule-style property specifies the style of the rule between columns:

Example

The column-rule-width property specifies the width of the rule between columns:

Example

The column-rule-color property specifies the color of the rule between columns:

Example

The column-rule property is a shorthand property for setting all the column-rule-* properties above.

The following example sets the width, style, and color of the rule between columns:

Example

Specify How Many Columns an Element Should Span

The column-span property specifies how many columns an element should span across.

The following example specifies that the element should span across all columns:

Example

Specify The Column Width

The column-width property specifies a suggested, optimal width for the columns.

The following example specifies that the suggested, optimal width for the columns should be 100px:

Example

CSS Multi-columns Properties

The following table lists all the multi-columns properties:

Property	Description
column-count	Specifies the number of columns an element should be divided into
column-fill	Specifies how to fill columns
column-gap	Specifies the gap between the columns
column-rule	A shorthand property for setting all the column-rule-* properties
column-rule-color	Specifies the color of the rule between columns
column-rule-style	Specifies the style of the rule between columns
column-rule-width	Specifies the width of the rule between columns
column-span	Specifies how many columns an element should span across
column-width	Specifies a suggested, optimal width for the columns
columns	A shorthand property for setting column-width and column-count

Источник

CSS columns Property

The CSS columns property is a shorthand for the following properties:

• column-count, which defines the maximum number of columns.
• column-width, which defines the minimum width of columns.

These two properties together create multi-column layout which will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.

The columns property is one of the CSS3 properties.

Setting both column-count and column-width is not always make sense, as it can restrict the flexibility and responsiveness of the layout.

If the width and count of columns do not fit into the width of the element, the browser will automatically reduce the column count to fit the specified column widths.

Initial Value	auto auto
Applies to	Block containers except table wrapper boxes.
Inherited	No.
Animatable	Yes. Width and count of columns are animatable.
Version	CSS3
DOM Syntax	object.style.columns = «100px 2»;

Syntax

columns: auto | column-width column-count | initial | inherit;

Example of the columns property:

html> html> head> title>Title of the document title> style> .example < -webkit-columns: 100px 3; /* Chrome, Safari, Opera */ -moz-columns: 100px 3; /* Firefox */ columns: 100px 3; > style> head> body> h2>Columns property example h2> div class="example"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into e lectronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. div> body> html>

Result

In the next example the minimum width for each column is set to 50px, and the maximum number of columns to 5:

Example of the columns property with specified width and number of columns:

html> html> head> title>Title of the document title> style> .example < -webkit-columns: 50px 5; /* Chrome, Safari, Opera */ -moz-columns: 50px 5; /* Firefox */ columns: 50px 5; > style> head> body> h2>Columns property example h2> div class="example"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. div> body> html>

Values

Value	Description
auto	Column-width and column-count properties are set to auto. This is default value.
column-width	Sets minimum width for columns.
column-count	Sets maximum number of columns.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Источник

CSS columns Property

Specify the minimum width for each column, and the maximum number of columns:

More «Try it Yourself» examples below.

Definition and Usage

The columns property is a shorthand property for:

The column-width part will define the minimum width for each column, while the column-count part will define the maximum number of columns. By using this property, the multi-column layout will automatically break down into a single column at narrow browser widths, without the need of media queries or other rules.

Default value:	auto auto
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.columns=»100px 3″ Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value	Description	Demo
auto	Default value. Sets both the column-width and column-count to «auto»	Demo ❯
column-width	Defines the minimum width for each column	Demo ❯
column-count	Defines the maximum number of columns	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a element into three columns:

Example

Specify a 40 pixels gap between the columns:

Example

Specify the width, style, and color of the rule between columns:

Источник