CSS properties - column-related

revision: March 16, 2024

Content

columns property

- is a shorthand property for column-width and column-count.
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.

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

Property values:

auto : default value. Sets both the column-width and column-count to "auto"

column-width : defines the minimum width for each column

column-count : defines the maximum number of columns

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.columns="1000px 3"

syntax examples:

            /* Column width */
            columns: 18em;

            /* Column count */
            columns: auto;
            columns: 2;

            /* Both column width and count */
            columns: 2 auto;
            columns: auto 12em;
            columns: auto auto;

            /* Global values */
            columns: inherit;
            columns: initial;
            columns: revert;
            columns: revert-layer;
            columns: unset;
        

                <div>
                    <p><strong>Set the minimum width for each column to 100px, and the maximum number 
                    of columns to 3:</strong></p>
                    <div class="newspaper1">
                    Lorem ipsum dolor sit amet, consectetuer adi.... legere me lius quod ii legunt saepius.
                    </div>
        
                    <p><strong>Set the minimum width for each column to 50px, and the maximum number 
                    of columns to 4:</strong></p>
                    <div class="newspaper2">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit,...legere me lius quod ii legunt 
                    saepius.
                    </div>
                </div>
                <style>
                .newspaper1 {columns: 10vw 3;}
                .newspaper2 {columns: 5vw 4;}
                </style>
            

                <p class="content-box">This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns. . . . . </p>
                <style>
                    .content-box {columns: 3 auto;}
                </style>
            

                <p class="content-box1">This is a bunch of text split into five columns  using the CSS `columns` property. The text is equally distributed over the columns. . . . . </p>
                <style>
                    .content-box1 {columns: 5 auto;}
                </style>
            

column-count property

- specifies the number of columns an element should be divided into. It breaks an element's content into the specified number of columns.

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

Property values:

number : the optimal number of columns into which the content of the element will be flowed;

auto : default value; the number of columns will be determined by other properties, like e.g. "column-width";

initial: sets this property to its default value;

inherit: inherits this property from its parent element.

JavaScript syntax: object.style.columnCount="3"

syntax examples:

        /* Keyword value */
        column-count: auto;
        
        /* <integer> value */
        column-count: 3;
        
        /* Global values */
        column-count: inherit;
        column-count: initial;
        column-count: revert;
        column-count: revert-layer;
        column-count: unset;
    

                    <div class="newspaper3">
                        Lorem ipsum dolor sit amet, ..nt saepius.
                    </div>
                    <style>
                        .newspaper3{columns: 4; column-gap: 2vw;}
                    </style>
                

column-fill property

- specifies how to fill columns, balanced or not.
If you add a height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially.

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

Property values:

balance: default value; fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally);

auto: fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly);

initial: sets this property to its default value;

inherit: inherits this property from its parent element.

JavaScript syntax: object.style.columnFill="auto"

syntax examples:

        /* Keyword values */
        column-fill: auto;
        column-fill: balance;
        column-fill: balance-all;// experimental

        /* Global values */
        column-fill: inherit;
        column-fill: initial;
        column-fill: revert;
        column-fill: revert-layer;
        column-fill: unset;
    

                <div>
                    <div class="newspaper4">
                        Lorem ipsum dolor sit amet, ...e consequat...
                    </div>
                    <div class="newspaper5">
                        Lorem ipsum dolor sit amet, consectetuer... consequat...
                    </div>
                </div>
                <style>
                    .newspaper4 {column-count: 3; height: 10vw; column-fill: auto;}
                    .newspaper5 {column-count: 3; height: 10vw; column-fill: balance;}
                </style>
            

column-gap property

- specifies/sets the gap between the columns in grid, flexbox or multi-column layout.
If there is a column-rule between columns, it will appear in the middle of the gap.

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

Property values:

length: a specified length that will set the gap between the columns; the property's value must be non-negative;

percentage: the size of the gap between columns defined as a <percentage>; the property's value must be non-negative;

normal default value; specifies a normal gap between the columns. W3C suggests a value of 1em;

initial: sets this property to its default value.

inherit: inherits this property from its parent element.

JavaScript syntax: object.style.columnGap="50px"

syntax examples:

            /* Keyword value */
            column-gap: normal;

            /* <length> values */
            column-gap: 3px;
            column-gap: 2.5em;

            /* <percentage> value */
            column-gap: 3%;

            /* Global values */
            column-gap: inherit;
            column-gap: initial;
            column-gap: revert;
            column-gap: revert-layer;
            column-gap: unset;
        

                <div class="newspaper64">
                    Lorem ipsum dolor sit amet, ...e consequat...
                </div>
                <style>
                    .newspaper6 {column-count: 3; column-gap: 3vw;}
                </style>
            

column-rule property

- sets the width, style, and color of the line/rule drawn between columns. This property is a shorthand property for: "column-rule-width", "column-rule-style (required)", "column-rule-color". If column-rule-color is omitted, the color applied will be the color of the text.

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

Property values:

column-rule-width: sets the width of the rule between columns; default value is medium;

column-rule-style: sets the style of the rule between columns; default value is none;

column-rule-color: sets the color of the rule between columns; default value is the color of the element;

initial: sets this property to its default value;

inherit: inherits this property from its parent element.

JavaScript syntax: object.style.columnRule="3px outset blue"

syntax examples:

            column-rule: dotted;
            column-rule: solid 8px;
            column-rule: solid blue;
            column-rule: thick inset blue;
            
            /* Global values */
            column-rule: inherit;
            column-rule: initial;
            column-rule: revert;
            column-rule: revert-layer;
            column-rule: unset;
        

                <div class="newspaper7">
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                </div>
                <style>
                    .newspaper7 {column-count: 3; column-gap: 3vw; column-rule: 0.3vw double #ff00ff;}
                </style>
            

                <div class="content-box2">
                    This is a bunch of text split into three columns. Take note of how the `column-rule`
                    property is used to adjust the style, width, and color of the rule that appears 
                    between the columns.
                </div>
                <style>
                    .content-box2 { padding: 0.3vw; background: #ff7; column-count: 3; column-rule: 
                        inset 0.2vw #33f;;}
                </style>
            

column-rule-color property

- specifies the color of the line/rule drawn between columns.

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

Property values:

color: specifies the color of the rule.

initial: sets this property to its default value.

inherit: inherits this property from its parent element.

JavaScript syntax: object.style.columnRuleColor="#0000ff"

syntax examples:

            /* <color> values */
            column-rule-color: red;
            column-rule-color: rgb(192, 56, 78);
            column-rule-color: transparent;
            column-rule-color: hsla(0, 100%, 50%, 0.6);
            
            /* Global values */
            column-rule-color: inherit;
            column-rule-color: initial;
            column-rule-color: revert;
            column-rule-color: revert-layer;
            column-rule-color: unset;
        

                <div class="newspaper8>
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                </div>
                <style>
                    .newspaper8 {column-count: 3; column-gap: 3vw; column-rule-style: solid; column-rule-color:
                        #ff0000;}
                </style>
            

                <p class="content-box3">
                    This is a bunch of text split into three columns. The `column-rule-color` property is used to change the color of the line that is drawn between columns. Don't you think that's wonderful? .....
                </p>
                <style>
                    .content-box3 {column-count: 3; column-rule-style: solid; column-rule-color: blue;}
                </style>
            

column-rule-style property

- specifies/sets the style of the line/rule drawn between columns.

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

Property values:

none : default value; defines no rule;

hidden : defines a hidden rule;

dotted : defines a dotted rule;

dashed : defines a dashed rule;

solid : defines a solid rule;

double : defines a double rule;

groove : specifies a 3D grooved rule; the effect depends on the width and color values;

ridge : specifies a 3D ridged rule; the effect depends on the width and color values;

inset : specifies a 3D inset rule; the effect depends on the width and color values;

outset : specifies a 3D outset rule; the effect depends on the width and color values;

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.columnRuleStyle="dotted"

syntax examples:

            /* <'border-style'> values */
            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;

            /* Global values */
            column-rule-style: inherit;
            column-rule-style: initial;
            column-rule-style: revert;
            column-rule-style: revert-layer;
            column-rule-style: unset;
        

                <div class="newspaper9">
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                </div>
                <style>
                .newspaper9 {column-count: 3; column-gap: 3vw; column-rule-style: dashed; column-rule-color: #ff0000;}
                </style>
            

                <p class="content-box4">
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                </p>
                <style>
                    .content-box4 {column-count: 3; column-rule-style: dotted;}
                </style>
            

column-rule-width property

- specifies/sets the width of the line/rule between columns.

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

Property values:

medium: default value; defines a medium rule;

thin: defines a thin rule;

thick: defines a thick rule;

length: specifies the width of the rule;

initial: sets this property to its default value;

inherit: inherits this property from its parent element.

JavaScript syntax: object.style.columnRuleWidth="10px"

syntax examples:

            /* Keyword values */
            column-rule-width: thin;
            column-rule-width: medium;
            column-rule-width: thick;

            /* <length> values */
            column-rule-width: 1px;
            column-rule-width: 2.5em;

            /* Global values */
            column-rule-width: inherit;
            column-rule-width: initial;
            column-rule-width: revert;
            column-rule-width: revert-layer;
            column-rule-width: unset;
        

                <div class="newspaper10">
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                </div>
                <style>
                    .newspaper10 {column-count: 3; column-gap: 3vw; column-rule-style: outset; column-rule-width: 1vw;}
                </style>
            

                <p class="content-box5">
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                <style>
                    .content-box5 {column-count: 3; column-rule-style: solid; column-rule-width:thick;}
                </style>
            

column-span property

- specifies how many columns an element should span across.

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

Property values:

none: default value; the element should span across one column;

all: the element should span across all columns;

initial: sets this property to its default value;

inherit: inherits this property from its parent element.

JavaScript syntax: object.style.columnSpan="all"

syntax examples:

            /* Keyword values */
            column-span: none;
            column-span: all;

            /* Global values */
            column-span: inherit;
            column-span: initial;
            column-span: revert;
            column-span: revert-layer;
            column-span: unset;
        

                <div class="newspaper11">
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                </div>
                <style>
                    .newspaper11 {column-span: all;}
                </style>
            

                <p class="content-box6">
                    This is a bunch of text split into three columns. The `column-rule-color` property is used to change the color of the line that is drawn between columns. Don't you think that's wonderful?
                </p>
                <style>
                    .content-box6 {column-span: all;}
                </style>
            

column-width

- specifies the column width. The number of columns will be the minimum number of columns needed to show all the content across the element.
"column-width" is a flexible property. Think of column-width as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width, then the columns will stop and drop into a single column.

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

Property values:

auto: default value; the column width will be determined by the browser;

length: a length that specifies the width of the columns; the number of columns will be the minimum number of columns needed to show all the content across the element.

initial: sets this property to its default value;

inherit: inherits this property from its parent element.

JavaScript syntax: object.style.columnWidth="100px"

syntax examples:

            /* Keyword value */
            column-width: auto;

            /* <length> values */
            column-width: 60px;
            column-width: 15.5em;
            column-width: 3.3vw;

            /* Global values */
            column-width: inherit;
            column-width: initial;
            column-width: revert;
            column-width: revert-layer;
            column-width: unset;
        

                <div class="newspaper12">
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                </div>
                <style>
                    .newspaper12 {column-width: 8vw;}
                </style>
            

                <div class="newspaper13">
                Lorem ipsum dolor sit amet, consectetuer adipisci... saepius.
                </div>
                <style>
                    .newspaper13 {column-width: 4vw;}
                </style>