Template:Columns-list/doc

{{Columns-list}} splits a list into columns that span the available space, and collapse automatically when there isn't enough space for separate columns. It is designed for use around lists in the body of an article, rather than in a navigation template like {{Navbox}} or content not formatted as a list. This template is based on {{Refs}}, but differs in that the list to be displayed is manually created rather than a generated list of references.

For a more flexible alternative capable of displaying arbitrary content in columns, see {{Div col}}. For a simpler list template that supports columns, see {{List}}. For component templates, see {{Column-gap}} and {{Column-rule}}.

Usage

*/# vs. {{List}} vs. {{Columns-list}} vs. {{Div col}}

• When to use * or #: If you need basic and multi-level ordered and unordered lists, but don't need custom formatting or columns.
• When to use {{List}}: If you need basic, single-level ordered or unordered lists where you need to customize general list formatting, run the content in columns, or run the content horizontally.
• When to use {{Columns-list}}: If you need complex or multi-level lists to run in columns, or are using Dynamic Page List (<dpl>, {{#tag:dpl}}, {{#dpl}}) to generate * or # lists.
• When to use {{Div col}}: If you need non-list content, or a mix of lists and non-list content, to run in columns.

Parameters

You can specify the width of columns by using the colwidth parameter.

{{Columns-list|colwidth=15em|
* ''Text''
* ''(usually a list)''
}}

Here, colwidth specifies the width of the columns in ems, and determines dynamically the number of columns based on screen width. More columns are displayed on wider displays, and fewer on narrower displays, collapsing down to a single column if necessary.

If colwidth is not specified, the default width of 30em will be used.

This template uses CSS3 multiple-column layout, which is not supported by all Web browsers.

Examples

Simplest usage

{{Columns-list|
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
}}

results in

• Absalom
• Baalariot
• Crown Manor
• D'ziriak
• Eagle Knight of the Golden Legion
• Faceless Idol of the Hungering God
• Gaav
• Hell

With CSS styles

CSS styles can also be added in addition to the colwidth parameter. For example:

{{Columns-list|colwidth=15em|style=width: 600px; font-style: italic;|
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
}}

results in

• Absalom
• Baalariot
• Crown Manor
• D'ziriak
• Eagle Knight of the Golden Legion
• Faceless Idol of the Hungering God
• Gaav
• Hell

To limit the maximum number of columns displayed, you can apply the column-count CSS property, although the template will still collapse to fewer columns if the combined columns would exceed the available area—for instance, if the colwidth value is set too high for the column count. For example:

{{Columns-list|colwidth=10em|style=column-count: 3;|
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
}}

renders as:

• Absalom
• Baalariot
• Crown Manor
• D'ziriak
• Eagle Knight of the Golden Legion
• Faceless Idol of the Hungering God
• Gaav
• Hell

Error messages

The presence of an equals sign within the template's content can also cause display problems and red error messages. To fix this problem, add | 1 = in front of the template's content.