【CSS】入れ子のリストを複数列に並べる

入れ子のリストを複数列に並べる

下記のようなリストを画面幅に応じて複数列に並べます。
column-count で複数列に並べることもできますが、何列に並べるか指定する必要があり、画面幅に応じた列数に並べることはできません、また、例えばメニュー A と メニュー A-1 ~ A-3 の間で改行されてバラバラになってしまったりもします。以下のリストは何列に並べるかの列数指定もなく、メニュー親子でバラバラに改行されてしまったりすることもありません。

実際にサンプルを用意しましたので、画面の横幅を縮めてリストの動きを確かめてください。

サンプルコード

HTML

<div class="menu">
  <ul>
    <li>
      メニューA
      <ul>
        <li>メニューA-1</li>
        <li>メニューA-2</li>
        <li>メニューA-3</li>
      </ul>
    </li>
    <li>
      メニューB
      <ul>
        <li>メニューB-1</li>
        <li>メニューB-2</li>
        <li>メニューB-3</li>
      </ul>
    </li>
    <li>
      メニューC
      <ul>
        <li>メニューC-1</li>
        <li>メニューC-2</li>
        <li>メニューC-3</li>
      </ul>
    </li>
  </ul>
</div>

CSS

.menu > ul {
  columns: auto 255px;
}
.menu > ul > li {
  break-inside: avoid-column;
} 

ポイントは break-inside: avoid-column; です。break-inside はボックスの途中で、ページ、段、領域をどのように区切るかを設定するプロパティです。 avoid-column で途中の段区切りを禁止することで、親子メニューがバラバラに改行されてしまうことを防ぎます。 columns では何列に区切るか列数の指定は不要ですが、区切る横幅のブレイクポイントは必要です。例だと、横幅 255 px をブレイクポイントとして設定しています。