Template:Div-col-break

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Documentationviewedithistorypurge
This documentation is transcluded from Template:Div-col-break/doc.


Template:CSS3 multiple column layout

{{Div-col}}, together with {{Div-col-break}} and {{Div-col-end}}, is used to make a list into columns. It automatically breaks each column into an equal space, and you can put manually break point between two columns. The template also offers options to set a smaller (90%) font-size (|small=yes), place gaps between the columns (|gap=) and to add other custom styling (|style=).

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

  • display: grid Set the contents as grid-based layout, makes them possible to become columns.
  • grid-template-columns Set the number of columns and their width (for CSS3-compliant browsers; see CSS Grid Layout Module)
  • grid-column-gap Set the gap between the columns

Usage[edit]

Symbol support vote.svg |cols= or first unnamed parameter 
Specifies the number of columns (default 2).
|colwidth= or second unnamed parameter 
Specifies the width of the columns (default 1fr).
|gap= 
Specifies the space between the content of adjacent columns. The default spacing is 1em.
|style= 
CSS styling to apply to the columns.

Examples[edit]

{{Div-col}}
* a
* b
* c
* d
{{Div-col-break}}
* e
* f
* g
* h
{{Div-col-end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
{{Div-col|3}}
* a
* b
* c
{{Div-col-break}}
* d
* e
* f
{{Div-col-break}}
* g
* h
{{Div-col-end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
{{Div-col|colwidth=10em}}
* a
* b
* c
* d
{{Div-col-break}}
* e
* f
* g
* h
{{Div-col-end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h


{{Div-col|small=yes}}
* a
* b
* c
* d
{{Div-col-break}}
* e
* f
* g
* h
{{Div-col-end}}
produces
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h

TemplateData[edit]

This is the TemplateData documentation for the template used by the new VisualEditor.

Div-col-break

Breaks a multi-column list started by {{div-col}}. It takes no parameters.

Template parameters

ParameterDescriptionTypeStatus
No parameters specified

See also[edit]

Template:Column-generating template families