動的にタグ一覧を出力する際、2行固定でいい感じに配置する方法を考えてみる

前提

• タグの個数は動的
• 2行固定
• 画面外にいく場合はスクロールできるように
• タグ間の余白は共通

タグ一覧の全長（L）= タグ1〜タグnの幅の合計（W1 〜 Wn）＋　余白の合計（G × (n - 1)）
※余白は一番最後にはつかないのでn-1

ulの子要素liの幅をそれぞれJSで取得して足す。
それに余白の合計も足す。

JSで全長の半分の長さをulのwidthに指定する。

しかしこの方法だと
1行目と2行目のタグの長さがきちんと揃わないと、3行目に落ちてしまう。

図で言う赤い分をいくらか足せば実現できるが、タグの長さが任意のため調整が難しい。

赤の追加する幅を長くすれば確実に2行でおさまる可能性が高くなるが
その分2行目の末尾にできる空白が長くなってしまう。

いい方法があればご教示いただきたいです。