CSSで縦並びリストを折り返して複数列にする方法を解説

例として都道府県のリストを使います｡

<ul class="list list--0">
  <li>北海道</li>
  <li>青森県</li>
  <li>岩手県</li>
  <li>宮城県</li>
  <li>秋田県</li>
  <li>山形県</li>
  <li>福島県</li>
  <li>茨城県</li>
  <li>栃木県</li>
  <li>群馬県</li>
  <li>埼玉県</li>
  <li>千葉県</li>
  <li>東京都</li>
  <li>神奈川県</li>
  <li>山梨県</li>
  <li>新潟県</li>
  <li>富山県</li>
  <li>石川県</li>
  <li>福井県</li>
  <li>長野県</li>
  <li>岐阜県</li>
  <li>静岡県</li>
  <li>愛知県</li>
  <li>三重県</li>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山県</li>
  <li>鳥取県</li>
  <li>島根県</li>
  <li>岡山県</li>
  <li>広島県</li>
  <li>山口県</li>
  <li>徳島県</li>
  <li>香川県</li>
  <li>愛媛県</li>
  <li>高知県</li>
  <li>福岡県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
  <li>熊本県</li>
  <li>大分県</li>
  <li>宮崎県</li>
  <li>鹿児島県</li>
  <li>沖縄県</li>
</ul>

都道府県に上下関係はないので､すべて同列のリストになります｡

.list--0{
  display: flex;
  flex-flow: row wrap;
}
.list--0 > li{
  width: 150px;
}

横並びであればアイテムが増えても無限大に対応することが可能です｡

縦を揃える必要があれば横幅を指定する必要があります｡

折り返しをしたいところまでをHTMLタグで区切ります｡

これがいちばん手っ取り早い方法ではありますが､レスポンシブ対応で折り返し位置が変わる場合には対応できないデメリットがあります｡

<ul class="list list--1">
  <ul class="list__list">
    <li>北海道</li>
    <li>青森県</li>
    <li>岩手県</li>
    <li>宮城県</li>
    <li>秋田県</li>
    <li>山形県</li>
    <li>福島県</li>
    <li>茨城県</li>
    <li>栃木県</li>
    <li>群馬県</li>
    <li>埼玉県</li>
    <li>千葉県</li>
    <li>東京都</li>
    <li>神奈川県</li>
    <li>山梨県</li>
    <li>新潟県</li>
  </ul>
  <ul class="list__list">
    <li>富山県</li>
    <li>石川県</li>
    <li>福井県</li>
    <li>長野県</li>
    <li>岐阜県</li>
    <li>静岡県</li>
    <li>愛知県</li>
    <li>三重県</li>
    <li>滋賀県</li>
    <li>京都府</li>
    <li>大阪府</li>
    <li>兵庫県</li>
    <li>奈良県</li>
    <li>和歌山県</li>
    <li>鳥取県</li>
    <li>島根県</li>
  </ul>
  <ul class="list__list">
    <li>岡山県</li>
    <li>広島県</li>
    <li>山口県</li>
    <li>徳島県</li>
    <li>香川県</li>
    <li>愛媛県</li>
    <li>高知県</li>
    <li>福岡県</li>
    <li>佐賀県</li>
    <li>長崎県</li>
    <li>熊本県</li>
    <li>大分県</li>
    <li>宮崎県</li>
    <li>鹿児島県</li>
    <li>沖縄県</li>
  </ul>
</ul>

仮に都道府県を3列にして並べたいという場合だと､このように3つにリストを分割してタグに囲めばかんたんだと思いつきます｡

しかし､レスポンシブに対応する場合に「2列にしたい」という場合にはうまく対応することができず､PCとスマホでソースを別にするということをしてしまいます｡
これはスマートではないですし､更新管理が難しくなります｡
例が増減の無いであろう都道府県なのでピンとこないかもしれませんが｡

デザインに依存した3列ありきのタグの使い方はよくないですが､地方ごとに区切るタグの使い方であれば問題ありません｡

この方法はあまりおすすめしませんが､もしこの方法を使う場合はレスポンシブのイメージを持ってコーディングする必要があります｡

.list--1{
  display: flex;
  flex-flow: row wrap;
}
.list--1 > .list__list{
  width: 150px;
}

区切りの無い都道府県のリストを使います｡

<ul class="list list--2">
  <li>北海道</li>
  <li>青森県</li>
  <li>岩手県</li>
  <li>宮城県</li>
  <li>秋田県</li>
  <li>山形県</li>
  <li>福島県</li>
  <li>茨城県</li>
  <li>栃木県</li>
  <li>群馬県</li>
  <li>埼玉県</li>
  <li>千葉県</li>
  <li>東京都</li>
  <li>神奈川県</li>
  <li>山梨県</li>
  <li>新潟県</li>
  <li>富山県</li>
  <li>石川県</li>
  <li>福井県</li>
  <li>長野県</li>
  <li>岐阜県</li>
  <li>静岡県</li>
  <li>愛知県</li>
  <li>三重県</li>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山県</li>
  <li>鳥取県</li>
  <li>島根県</li>
  <li>岡山県</li>
  <li>広島県</li>
  <li>山口県</li>
  <li>徳島県</li>
  <li>香川県</li>
  <li>愛媛県</li>
  <li>高知県</li>
  <li>福岡県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
  <li>熊本県</li>
  <li>大分県</li>
  <li>宮崎県</li>
  <li>鹿児島県</li>
  <li>沖縄県</li>
</ul>

.list--2{
  column-count: 3;
}

column-countだと列の数を指定するだけですべてのアイテムを均等に配置してくれます｡

column-countはそもそもが文章の段組みのためのCSSです｡
リストの折り返しのためのCSSではないため1列の幅が固定されるなどのデメリットがあります｡

区切りの無い都道府県のリストを使います｡

<ul class="list list--3">
  <li>北海道</li>
  <li>青森県</li>
  <li>岩手県</li>
  <li>宮城県</li>
  <li>秋田県</li>
  <li>山形県</li>
  <li>福島県</li>
  <li>茨城県</li>
  <li>栃木県</li>
  <li>群馬県</li>
  <li>埼玉県</li>
  <li>千葉県</li>
  <li>東京都</li>
  <li>神奈川県</li>
  <li>山梨県</li>
  <li>新潟県</li>
  <li>富山県</li>
  <li>石川県</li>
  <li>福井県</li>
  <li>長野県</li>
  <li>岐阜県</li>
  <li>静岡県</li>
  <li>愛知県</li>
  <li>三重県</li>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山県</li>
  <li>鳥取県</li>
  <li>島根県</li>
  <li>岡山県</li>
  <li>広島県</li>
  <li>山口県</li>
  <li>徳島県</li>
  <li>香川県</li>
  <li>愛媛県</li>
  <li>高知県</li>
  <li>福岡県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
  <li>熊本県</li>
  <li>大分県</li>
  <li>宮崎県</li>
  <li>鹿児島県</li>
  <li>沖縄県</li>
</ul>

.list--3{
  display: flex;
  flex-flow: column wrap;
  height: 400px;
}

通常､display: flex;だと横並びになりますが､flex-direction:column;にすることで縦並びにすることができます｡
また､flex-wrap: wrap;にすることで折り返しが可能になります｡
flex-flow: column wrap;にすることで一括指定ができます｡

しかし､折り返しポイントがなければただ縦に並ぶだけなので､高さ指定をしないといけません｡
このため､アイテム数が増減しないとわかっているリストでないといつか表示エリアを超えてしまう可能性があり実質使うことができない､または､増減するたびに修正が必要になってしまいます｡

区切りの無い都道府県のリストを使います｡

基本的には､ display:flex;を使う方法 を使いますが､CSSで高さ指定をせず､jQueryで高さを動的に取得､指定します｡

<ul class="list list--4">
  <li>北海道</li>
  <li>青森県</li>
  <li>岩手県</li>
  <li>宮城県</li>
  <li>秋田県</li>
  <li>山形県</li>
  <li>福島県</li>
  <li>茨城県</li>
  <li>栃木県</li>
  <li>群馬県</li>
  <li>埼玉県</li>
  <li>千葉県</li>
  <li>東京都</li>
  <li>神奈川県</li>
  <li>山梨県</li>
  <li>新潟県</li>
  <li>富山県</li>
  <li>石川県</li>
  <li>福井県</li>
  <li>長野県</li>
  <li>岐阜県</li>
  <li>静岡県</li>
  <li>愛知県</li>
  <li>三重県</li>
  <li>滋賀県</li>
  <li>京都府</li>
  <li>大阪府</li>
  <li>兵庫県</li>
  <li>奈良県</li>
  <li>和歌山県</li>
  <li>鳥取県</li>
  <li>島根県</li>
  <li>岡山県</li>
  <li>広島県</li>
  <li>山口県</li>
  <li>徳島県</li>
  <li>香川県</li>
  <li>愛媛県</li>
  <li>高知県</li>
  <li>福岡県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
  <li>熊本県</li>
  <li>大分県</li>
  <li>宮崎県</li>
  <li>鹿児島県</li>
  <li>沖縄県</li>
</ul>

.list--4{
  display: flex;
  flex-flow: column wrap;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function(){
    // 列の数を指定
    var column = 3;

    // すべての要素数を取得
    var num = $(".list--4 > li").length;

    // 1要素の高さを取得
    var height = $(".list--4 > li").outerHeight();

    // 1列の要素数を計算　小数点は切り上げ
    var column_num = Math.ceil(num / column);

    // 1列の要素数 * 1列の高さ
    var column_height = column_num * height;

    $(".list--4").height( column_height );
  });
</script>

実際の案件次第でやり方はいろいろあると思います

ここでは列の数を指定して､アイテム総数から1列のアイテム数を動的に指定する方法をプログラムします｡

リストのアイテム総数を指定した列数で割り算します｡
例の都道府県では､ 3列 / 47都道府県 の計算をすることになります｡

割り切れず小数点以下が発生した場合は切り上げます｡
切り捨てたり､四捨五入だと指定した3列を超えてしまう可能性があるため小数点切り上げします｡
JavaScriptで小数点切り上げをするにはMath.ceil() 関数を使います｡

1要素の高さもJavaScript(jQuery)で取得し､1列のアイテム数と掛け算します｡
これで高さを動的に指定することができアイテムの増減に対応することができます｡