---
title: CSS Multiple Columns
description: "## CSS Multi-column Layout The CSS multi-column layout allows easy definition of multiple columns of text – just like in newspapers: ## CSS Multi-column Properties In this chapter you will learn about the following multi-column properties: - `column-count` - `column-gap`…"
url: "https://apprentice.mn/docs/css-multiple-columns/"
updated: "2021-05-12"
category: CSS
---

# CSS Multiple Columns

## CSS Multi-column Layout

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

## 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 | Chrome | Internet explorer | Mozila FIrefox | Safari | Opera |
| --- | --- | --- | --- | --- | --- |
| 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 <div> element into 3 columns: 

### Example

      `div {
  column-count: 3;
}`

## 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

      `div {
  column-gap: 40px;
}`

## CSS Column Rules

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

### Example

      `div {
  column-rule-style: solid;
}`

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

### Example

      `div {
  column-rule-color: lightblue;
}`

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

      `div {
  column-rule: 1px solid lightblue;
}`

## 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 <h2> element should span across all columns:

### Example

              `h2 {
  column-span: all;
}`

## 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

              `div {
  column-width: 100px;
}`

## 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 |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-multiple-columns%2F&linkname=CSS%20Multiple%20Columns](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-multiple-columns%2F&linkname=CSS%20Multiple%20Columns)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-multiple-columns%2F&linkname=CSS%20Multiple%20Columns](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-multiple-columns%2F&linkname=CSS%20Multiple%20Columns)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-multiple-columns%2F&linkname=CSS%20Multiple%20Columns](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-multiple-columns%2F&linkname=CSS%20Multiple%20Columns)[https://www.addtoany.com/share](https://www.addtoany.com/share)