２列にするときって普通にすると
flexとかflowとか使って、２列にするんですが
それだと
-　list01 -　list02
-　list03 -　list04
-　list05

って感じに横になるんですがね。
そうじゃなくて今回は

-　list01 -　list04
-　list02 -　list05
-　list03

こういう感じにしたいのです。
ってことで簡単に、

/// HTML
<ul>
  <li>list 01</li>
  <li>list 02</li>
  <li>list 03</li>
  <li>list 04</li>
  <li>list 05</li>
</ul>

HTMLはこんな感じ

ul{
  column-count: 2;
}

cssはこんな感じです。
でもね、これだと左３右２とかで数があってないと
左右が縦センターに揃っちゃうんですよね。
面がずれるんです。

li{
  display: inline-block;
}

なので中のに上記を追加したら面そろいます。
ってなわけでいちいち枠で囲って並べたりしなくてもよくなりました。
すごくありがたいですね！

あと、カラム間の距離は

ul{
  column-count: 2;
  column-gap: 10px;
}

って感じで、「column-gap」でできます。
以前記事を書いたのですが、こっちのがわかりやすくかけたと思うのでこっち残しにします。

一応、flexとか使ってもできますが、それだと高さを指定しないとだめなので、
中身（数）が増えたり、２行になったりとかね、そういうので使えない^※ので
上記が一番フレキシブルにつかえると思います。
※ JSとか使ったらいけるんだろうけど面倒なのでしないです