Template:Div col end

From PathfinderWiki
Template documentation (for the above template, sometimes hidden or invisible)
Subpages of this template:
Wikipedia logo

This page uses content from Wikipedia. The original article was at Template:Div col. The list of authors can be seen in the page history. The text of Wikipedia is available under the Creative Commons Attribution-ShareAlike License.

{{Div col}} can be used to make a list into columns that wrap properly and compatibly with portable computer devices, tablet and phone operating systems, and small screens and browser windows. It automatically breaks the content into columns of equal width in the available space, meaning, for instance, that it is not necessary to work out the halfway point, or the one-third and two-thirds points, between two columns.

  • The list content is either provided by the content parameter (which can be restrictive of what content is allowed; for instance, wiki markup like | must somehow be escaped), or terminated with {{Div col end}}. The {{Columns-list}} wrapper uses the parameter method for providing content (including its limitations).
  • The template system also offers parameter options to set a smaller (90%) font size (small=yes), place vertical lines ("rules") between the columns (rules) and to add other custom styling (style).

{{Div col}} can create multiple columns in web browsers that support the following CSS properties:

By default, the template creates columns that are 30em wide.

For component templates used by this template, 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

colwidth (optional)
Specifies the minimum width of the columns and determines automatically the number of columns based on screen width (i.e. more columns will be shown on wider displays). Can be specified in any CSS unit, for instance in em, about the width of a capital "M", such as colwidth=20em. If no value is supplied, the template uses a default of 30em.
rules (optional)
Adds vertical lines ("rules") between the columns if set to yes or some CSS styling, such as 1px dashed blue;.
gap (optional)
Specifies the space between the content of adjacent columns. Specified in any CSS unit, such as gap=2em. The default spacing (set by browser) is 1em.
small (optional)
If not blank, reduces the font size by 10%.
style (optional)
Additional CSS styling to apply to the columns.
content (optional)
Content to display in column. If used, {{Div col end}} is not required. If omitted, follow {{Div col}} with the content, then add {{Div col end}} after the content.

Examples

If you do not see columns in the below examples, try widening your browser window, zooming out, or reducing your browser's default font size. Likewise, to view column collapsing behavior try narrowing your browser window, zooming in, or increasing default font sizes.

Simplest usage

Using only default values
{{Div col}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell

Usage of "colwidth" parameter

Example with column width of 10em
{{Div col|colwidth=10em}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell

Usage of "rules" parameter

Example
{{Div col|rules=yes}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell

Usage of "gap" parameter

Example
{{Div col|colwidth=10em|rules=yes|gap=2em}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell

Usage of "small" parameter

Example showing how setting "small" parameter to "yes" produces smaller font size
{{Div col|small=yes}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell

Usage of "content" parameter

Example showing how to provide "content" parameter without using {{Div col end}}
{{Div col|colwidth=10em|content=
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell

Usage with multiple parameters

Parameters can be used in any order.

Example: 

{{Div col|colwidth=10em|rules=yes|gap=2em|small=yes}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}

or 

{{Div col|rules=yes|gap=2em|small=yes|colwidth=10em}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell

and exactly the same result below

  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell
Example with column width of 20em
{{Div col|colwidth=20em}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell
Example with column width of 30em
{{Div col|colwidth=30em}}
* Absalom
* Baalariot
* Crown Manor
* D'ziriak
* Eagle Knight of the Golden Legion
* Faceless Idol of the Hungering God
* Gaav
* Hell
{{Div col end}}
produces
  • Absalom
  • Baalariot
  • Crown Manor
  • D'ziriak
  • Eagle Knight of the Golden Legion
  • Faceless Idol of the Hungering God
  • Gaav
  • Hell
Example of how this template behaves if no bullets (generated by asterisk mark) are used.
{{Div col|colwidth=10em}}
Absalom
Baalariot
Crown Manor
D'ziriak
Eagle Knight of the Golden Legion
Faceless Idol of the Hungering God
Gaav
Hell
{{Div col end}}
produces

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

With CSS styles/column count limits

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
Visit Template:Div col end/doc to edit this text! (How does this work?)
Retrieved from "https://pathfinderwiki.com/w/index.php?title=Template:Div_col_end&oldid=221242"