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