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の各ブラウザのサポート状況です