CSS Column - 10 Properties and its Values (Reference)

https://webdevfix.com/10-column-properties-and-values-in-css

Tech:

Css

Since:

1 year ago

Views:

1

The CSS column property is used to set the column width, column count, and other column properties of an element.

Column properties:

column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns

column-count

Specifies the number of columns an element should be divided.

column-count: number;
column-count: auto;
column-count: initial;
column-count: inherit;

column-fill

Specifies how to fill columns, balanced or not.

column-fill: balance;
column-fill: auto;
column-fill: initial;
column-fill: inherit;

column-gap

Specifies the gap between the columns.

column-gap: length;
column-gap: normal;
column-gap: initial;
column-gap: inherit;

column-rule

A shorthand property for all the column-rule-* properties.

column-rule: rule-width rule-style rule-color;
column-rule: initial;
column-rule: inherit;

column-rule-color

Specifies the color of the rule between columns.

column-rule-color: color;
column-rule-color: initial;
column-rule-color: inherit;

column-rule-style

Specifies the style of the rule between columns.

column-rule-style : none;
column-rule-style : hidden;
column-rule-style : dotted
column-rule-style : dashed;
column-rule-style : solid;
column-rule-style : double;
column-rule-style : groove;
column-rule-style : ridge;
column-rule-style : inset;
column-rule-style : outset;
column-rule-style : initial;
column-rule-style : inherit;

column-rule-width

Specifies the width of the rule between columns.

column-rule-width: medium;
column-rule-width: thin;
column-rule-width: thick;
column-rule-width: length;
column-rule-width: initial;
column-rule-width: inherit;

column-span

Specifies how many columns an element should span across.

column-span: none;
column-span: all;
column-span: initial;
column-span: inherit;

column-width

Specifies the column width.

column-width: auto;
column-width: length;
column-width: initial;
column-width: inherit;

columns

A shorthand property for setting column-width and column-count.

columns: auto;
columns: width count;
columns: initial;
columns: inherit;

More Articles

CSS Background - 10 Properties and its Values (Reference)

CSS Font - 11 Properties and its Values (Reference)

CSS Text - 11 Properties and its Values (Reference)

CSS Flex - 13 Properties and its Values (Reference)

CSS Functions - 14 Functions (Reference)