---
title: "Multi column layout properties"
date: "2018-03-03T08:08:10+00:00"
summary: "Discover how to create multi-column layouts with ease. Learn to control column count, gap, fill, span, and width, plus customize dividing rules for professional-looking content. Perfect for web designers and developers."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/multi-column-layout-properties"
id: "19ccd334-6f2d-4dc6-83a2-0d57934d517f"
---

Table of contents will be added

Set the content to display over multiple columns. This is mainly used for dividing text into columns

Column count
------------

Set the number of columns an element should be divided into.

### Expected value:

*   **Enter a number** - The number of columns.
*   **auto** - Default value. The number of columns will be determined by other properties, like Column min width
*   **initial -** Sets the property to its default value
*   **inherit** - Inherits the property from its parent element.

Column gap
----------

Set the width of the gap between the columns.

### Expected value:

*   **Enter a number** - Sets a width for the gap
*   **normal** - Specifies a normal gap between the columns
*   **initial -** Sets the property to its default value
*   **inherit** - Inherits the property from its parent element.

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Column fill
-----------

Set how the content fills the columns.

### Options and behavior:

*   **Balance** - Balances the content across the columns
*   **Auto** - Fills each column until it reaches the height, and do this until it runs out of content
*   **Initial -** Sets the property to its default value
*   **Inherit** - Inherits the property from its parent element.

Column span
-----------

Sets the content to span the columns. Note: this is not supported by Firefox.

### Options and behavior:

*   **Span** - Sets the content to span the columns
*   **none** - Sets the span property to none
*   **Initial** \- Sets the property to its default value
*   **Inherit** - Inherits the property from its parent element.

Min column width
----------------

Set the minimum width for the columns. The number of columns will be the minimum number of columns needed to show all the content across the element.

### Expected value:

*   **Enter a number** - Sets a minimum width for the column
*   **auto** - Specifies a normal gap between the columns
*   **initial -** Sets the property to its default value
*   **inherit** - Inherits the property from its parent element.

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within [Base unit settings](/drupal-starter-kits/add-ons/site-studio/configuring-your-base-unit-settings "Configuring your base unit settings")
*   **px** - The value will be applied in pixels

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Rule style
----------

Sets the style of a dividing rule between the columns. 

### Options:

*   **None** - Display no rule
*   **Hidden** - Display no rule
*   **Solid** - Display a solid rule
*   **Dotted** - Display a dotted rule
*   **Dashed** - Display a dashed rule
*   **Double** - Display a double rule
*   **Groove** - Display a 3D grooved rule
*   **Ridge** - Display a 3D ridged rule
*   **Inset** \- Display a 3D inset rule
*   **Outset** - Display a 3D outset rule
*   **Initial** \- Sets the property to its default value
*   **Inherit** - Inherits the property from its parent element.

Important

Some rule styles are dependant on the rule width and color. For example, you cannot have a Double rule which is set to 1px in width as there is not enough width to display the double lines.

Rule width
----------

Sets the width of a dividing rule between the columns. 

### Expected value:

*   Enter a number (Negative values are not accepted)
*   Enter a keyword - thin, medium, thick (Browsers may render these widths differently)

### Accepted units:

You can leave blank or specify a unit to be used.

*   **blank** - Enter a number and the value will be interpreted as pixels
*   **px** - The value will be applied in pixels

**Note:** Additional units are accepted. For more information see [https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

Rule color
----------

Set the border color of the rule.

### Expected value:

*   Select a color from the color palette
*   Translucent colors are accepted