リストを自動で3列に分ける

Ads

Result


リストを自動で任意の列数に振り分ける、みたいなの。マルチカラムレイアウトを使います。
リスト分けたいだけならテキストコンテンツのようにbreak-insideやpage-break-insideを考えなくていいので楽ですね。

CSSではなくJavaScriptを使う方法は過去に書いてます。jQueryを使いますが・・
リストを任意のカラム数に分ける

css

.columns {/*分けたいリストの親要素に指定する。column-countはカラム数*/
  column-count: 3;
  column-gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

html

<ul class="columns">
<li>
<label>
<input type="checkbox" />1 lorem ipsum
</label>
</li>
<li>
<label>
<input type="checkbox" />2 lorem ipsum
</label>
</li>
<li>
・
・
・
</ul>

can i use

column-countの各ブラウザのサポート状況です

via

CSS3 Multi Columns

タイトルとURLをコピーしました