ブラウザのCSS3マルチカラムレイアウト対応プロパティIEEdgeFirefoxSafariChromeOpera
column-width
column-count? 10
(2012)? 12
(2015)? 1.5
(2005)? 3
(2007)? 1
(2008)? 11.1
(2011)
columns? 10
(2012)? 12
(2015)? 9
(2011)? 3
(2007)? 1
(2008)? 11.1
(2011)
break-before
break-after
break-inside? 10
(2012)? 12
(2015)? 65
(2019)? 10
(2016)? 50
(2016)? 11.1
(2011)
.mw-parser-output .ombox{margin:4px 0;border-collapse:collapse;border:1px solid #a2a9b1;background-color:#f8f9fa;box-sizing:border-box}.mw-parser-output .ombox.mbox-small{font-size:88%;line-height:1.25em}.mw-parser-output .ombox-speedy{border:2px solid #b32424;background-color:#fee7e6}.mw-parser-output .ombox-delete{border:2px solid #b32424}.mw-parser-output .ombox-content{border:1px solid #f28500}.mw-parser-output .ombox-style{border:1px solid #fc3}.mw-parser-output .ombox-move{border:1px solid #9932cc}.mw-parser-output .ombox-protection{border:2px solid #a2a9b1}.mw-parser-output .ombox .mbox-text{border:none;padding:0.25em 0.9em;width:100%;font-size:90%}.mw-parser-output .ombox .mbox-image{border:none;padding:2px 0 2px 0.9em;text-align:center}.mw-parser-output .ombox .mbox-imageright{border:none;padding:2px 0.9em 2px 0;text-align:center}.mw-parser-output .ombox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox .mbox-invalid-type{text-align:center}@media(min-width:720px){.mw-parser-output .ombox{margin:4px 10%}.mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;width:238px}}

Luaモジュールを使用しています:

モジュール:Columns-list

このテンプレートはテンプレートスタイルを使用しています:

Template:Columns-list/styles.css

ショートカット

{{Col-list}}

{{Cmn}}

リストを段組みで表示するためのテンプレートです。リスト以外を含む内容を段組みで表示する場合には{{Div col}}を使用してください。
使い方

列数を指定した場合、モバイルデバイスなど小さな画面においても強制的に段組み表示されるため、アクセシビリティの観点から望ましくありません。列数は指定せず、列幅を指定することで画面サイズに合わせて動的な段組み表示とすることを推奨します。

列幅／列数の指定

各列の幅（column-width）を下のように指定することができます。{{columns-list|30em|* ほげ* ふが}}

列数は、指定された列幅と画面幅に応じて、幅の広い画面では多くの段組で表示するなど、動的に決まります。第1引数に単位なしの数字を指定した場合、列数（column-count）が直接指定されることになりますが、上述の理由により非推奨です。

列幅の指定は、引数名|colwidth=、|col-width=、|column-width=を使用しての指定、引数名を省略した第1引数としての指定、いずれでも可能です。使用できる単位は、em・pt・pxなどです。
表示内容の指定

第2引数（列幅を引数名付きで指定する場合は第1引数でも可）もしくは|content=に* ほげ* ふが* ぴよ

や# foo# bar# baz

のような箇条書きを指定してください。* ほげ* ふが* ぴよ# foo# bar# baz

のようなかたちで<ul>...</ul>要素と<ol>...</ol>要素を混在させる書き方[注 1]や* ほげ* ふが* ぴよ* foo* bar* baz

のように改行を含めることにより<ul>...</ul>（<ol>...</ol>）要素が複数に分かれてしまう書き方は、適切な表示がなされない場合があるので避けてください。

この引数内でHTMLタグを使用する場合は、{{#tag:}}マジックワードを使用してください。
その他の引数

|plainlist=1を指定すると、{{Plainlist}}のようにビュレットなしの記号とすることができます。

|rules=引数には、列間の線（段間罫）をのように指定します（例：1px dashed #888）。

|gap=引数には、列間の隙間（溝）を指定します（例：3em）。

|small=1を指定すると、フォント・サイズが90パーセントになります（モバイル版などを除く）。

|style=引数には、任意のCSSプロパティを指定することができます。

このテンプレートに限ったことではありませんが、|style=引数にwidthプロパティを指定すると、それよりも幅の小さな端末ではモバイル・ビューの仕様[注 2]によりそれ以降の記述が見ることができなくなってしまうので、控えてください。

{{Div col}}との相違点

本テンプレートには、<ul>...</ul>、<ol>...</ol>要素のmargin-topに起因したレイアウト崩れ[注 3]への対策[注 4]がなされていますが、{{Div col}}では同様の対策は行われていません。
使用例

※出力例の枠線は実際には表示されません。
入力例1
{{columns-list|25em|* [[ジョージ・ワシントン]]* [[ジョン・アダムズ]]* [[トーマス・ジェファーソン]]* [[ジェームズ・マディソン]]* [[ジェームズ・モンロー]]}}
表示例1
body:not(.skin-minerva) .mw-parser-output .columns-list__wrapper{margin-top:0.3em}body:not(.skin-minerva) .mw-parser-output .columns-list__wrapper>ul,body:not(.skin-minerva) .mw-parser-output .columns-list__wrapper>ol{margin-top:0}body:not(.skin-minerva) .mw-parser-output .columns-list__wrapper--small-font{font-size:90%}

ジョージ・ワシントン

ジョン・アダムズ

トーマス・ジェファーソン

ジェームズ・マディソン

ジェームズ・モンロー

入力例2
{{columns-list|25em|style=font-style:italic;|plainlist=1|* [[ジョージ・ワシントン]]* [[ジョン・アダムズ]]* [[トーマス・ジェファーソン]]* [[ジェームズ・マディソン]]* [[ジェームズ・モンロー]]}}