CSS column-width Property

Last Updated : 26 Aug, 2024

The columns-width property in CSS is used to define the width of the columns. The minimum number of columns are required to show the content across the element. It is a flexible property. If the browser cannot fit at least two-columns at a given column-width then the two columns will be put into a single column.

Syntax:

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

Property Values:

auto: It is the default value. The browser determines the width of the columns.
length: It is used to specify the width of the columns in terms of length. The length can be set in the form of px, cm etc.
initial: It is used to set the column-width property to its default value.
inherit: It is used to set column-width property from its parent.

Example: In this example, we are using column-width: auto property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS column-width Property
    </title>

    <style>
        .gfg {

            /* For Chrome, Safari, Opera browsers */
            -webkit-column-width: auto;

            /* For Firefox browser */
            -moz-column-width: auto;

            column-width: auto;
        }
    </style>
</head>

<body>
    <h2>
        The column-width Property
    </h2>

    <div class="gfg">
        The course is designed for students as well
        as working professionals to prepare for
        coding interviews. This course is going
        to have coding questions from school level
        to the level needed for product based
        companies like Amazon, Microsoft, Adobe, etc.
    </div>
</body>
</html>

Output:

Example: In this example, we are using column-width: lengthproperty.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS column-width Property
    </title>

    <style>
        .gfg {

            /* For Chrome, Safari, Opera browsers */
            -webkit-column-width: 100px;

            /* For Firefox browser */
            -moz-column-width: 100px;

            column-width: 100px;
        }
    </style>
</head>

<body>
    <h2>
        The column-width Property
    </h2>

    <div class="gfg">
        The course is designed for students as well
        as working professionals to prepare for
        coding interviews. This course is going
        to have coding questions from school level
        to the level needed for product based
        companies like Amazon, Microsoft, Adobe, etc.
    </div>
</body>
</html>

Output:

Example: In this example, we are using column-width: initial property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS column-width Property
    </title>

    <style>
        .gfg {

            /* For Chrome, Safari, Opera browsers */
            -webkit-column-width: initial;

            /* For Firefox browser */
            -moz-column-width: initial;

            column-width: initial;
        }
    </style>
</head>

<body>
    <h2>
        The column-width Property
    </h2>

    <div class="gfg">
        The course is designed for students as well
        as working professionals to prepare for
        coding interviews. This course is going
        to have coding questions from school level
        to the level needed for product based
        companies like Amazon, Microsoft, Adobe, etc.
    </div>
</body>
</html>