CSS Multiple Columns

The columns property in CSS is used to specify the number of columns and their width. This is a shorthand property that can accept multiple values at the same time.

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

1. column-count

In CSS, the column-count property is used to divide a portion of content within any HTML element into a specified number of columns.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-count: 3;
    }
</style>
</head>
<body>

<div class="col">
    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.
</div>

</body>
</html>

Preview

2. column-gap

In CSS, the column-gap property specifies the amount of space between the columns into which a given text is divided using the column-count property.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-count: 3;
        column-gap: 30px;
    }
</style>
</head>
<body>

<div class="col">
    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.
</div>

</body>
</html>

Preview

3. column-rule-style

In CSS, the column-rule-style property is used to specify the style of the column rule that appears between columns on a multi-column layout.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: dotted;
        column-rule-color: #00ab55;
    }
</style>
</head>
<body>

<h1>The column-rule-style property</h1>

<div class="col">
    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.
</div>

</body>
</html>

Preview

4. column-rule-width

In CSS, the column-rule-width property is used to change the width of the column rule, which is the vertical lines between the columns.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: solid;
        column-rule-color: #00ab55;
        column-rule-width: 8px;
    }
</style>
</head>
<body>

<div class="col">
    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.
</div>

</body>
</html>

Preview

5. column-rule-color

CSS's column-rule-color property is used to change the color of the rule that runs between the columns.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: solid;
        column-rule-color: #00ab55;
    }
</style>
</head>
<body>

<div class="col">
    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.
</div>

</body>
</html>

Preview

6. column-rule-style

In CSS, the column-rule-width property is used to change the width of the column rule, which is the vertical lines between the columns.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-count: 3;
        column-gap: 30px;
        column-rule: 2px solid #00ab55;
    }
</style>
</head>
<body>

<div class="col">
    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.
</div>

</body>
</html>

Preview

7. column-span

In CSS's column-span property specifies how many columns an element can span across. It can have a value of none | all | initial | inherit.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: solid;
        column-rule-color: #00ab55;
    }
    h1 {
        column-span: all;
    }
</style>
</head>
<body>

<div class="col">
    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.
</div>

</body>
</html>

Preview

8. column-width

In CSS, the columns-width property is used to specify the width of the columns. To display the content across the element, the bare minimum of columns is required. It is a versatile property. If the browser cannot fit at least two columns at the specified column width, the two columns will be combined into a single column.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .col {
        column-width: 150px;
    }
</style>
</head>
<body>

<div class="col">
    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.
</div>

</body>
</html>

Preview

CSS Masking

CSS User Interface

CSS Multiple Columns

1. column-count

Example

2. column-gap

Example

3. column-rule-style

Example

4. column-rule-width

Example

5. column-rule-color

Example

6. column-rule-style

Example

7. column-span

Example

8. column-width

Example

Links

Tutorials

Connect with us