今回、CSSのみで、2列の縦方向の表を作りたいと思ったときに、思いの外時間がかかったので解決方法を紹介します。
表のマスの数が常に固定であれば、Gridを使えば直ぐに解決だったのですが、以下のようにシステムで表のマスが可変する場合は、指定した数が超えてしまうと2列から3列になってしまい、崩れが発生してしまったので、他に方法がないかで調べました。
See the Pen grid-column-variable-item by takefushi (@takefushi-the-bashful) on CodePen.
調べてみたら、殆ど使ったことがないCSSの「column-count」で一発解決しました。（出会うまでにやたら時間がかかりました）
See the Pen column-count by takefushi (@takefushi-the-bashful) on CodePen.
column-count を使えば、システムでマスの数が可変しても、崩れず2列を保てるのでとても便利です。
また、column-gapを使えば列の間のマージンも調整できるので有り難いです。
ぜひ、こういった場面に遭遇した場合は、column-count をお試しください！
