Template:Div col/doc

This is the current revision of this page, as edited by Alex (talk | contribs) at 00:24, 17 October 2024 (Created page with "{{Documentation}} The '''div col''' (short for division columns) formats a list into columns that wrap at multiple screen resolutions responsively. It automatically breaks the available screen space into equal parts. ==Usage and examples== ===Basic usage=== <pre> {{div col}}<!-- default width is 30em --> * a * b * c * d * e * f * g * h {{div col end}} </pre> Produces: {{div col}} * a * b * c * d * e * f * g * h {{div col end}} ===Colwidth=== <pre> {{div col|colwidth=..."). The present address (URL) is a permanent link to this version.

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
This is a documentation subpage for Template:Div col.
It contains usage information, categories, and other content that is not part of the original template page.

The div col (short for division columns) formats a list into columns that wrap at multiple screen resolutions responsively. It automatically breaks the available screen space into equal parts.

Usage and examples

Basic usage

{{div col}}<!-- default width is 30em -->
* a
* b
* c
* d
* e
* f
* g
* h
{{div col end}}

Produces:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Colwidth

{{div col|colwidth=10em}} <!-- column width of 10em -->
* a
* b
* c
* d
* e
* f
* g
* h
{{div col end}}

Produces:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Content

{{div col|content=
* a
* b
* c
* d
* e
* f
* g
* h
}}

Produces:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Gap

{{div col|colwidth=10em|gap=2em}} <!-- column width of 10em and a gap of 2em -->
* a
* b
* c
* d
* e
* f
* g
* h
{{div col end}}

Produces:

  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

Template data

Show/hide template's data

The following information is used by extensions and applications, such as VisualEditor, to help users implement this template onto pages. Please ensure that it is up-to-date.

Breaks a list into columns. It automatically breaks each column to an equal space, so you do not manually have to find the half way point on two columns. The list is provided by |content= or closed with {{div col end}}.

Template parameters

ParameterDescriptionTypeStatus
Column widthcolwidth

Specifies the width of columns, and determines dynamically the number of columns based on screen width; more columns will be shown on wider displays.

Example
30em
Stringoptional
Gap sizegap

Specifies the space between the content of adjacent columns.

Example
2em
Stringoptional
HTML classclass

Specifies any class or multiple space-delimited classes.

Example
plainlist
Stringoptional
CSS stylestyle

Specifies any custom styling.

Stringoptional
Contentcontent

Specifies the content to divide into columns

Contentoptional

See also