How to control the columns based on the menus in Vanilla Javascript?

Issue

I want to display the menus as separate columns if its more than 4 menus. I need to achieve this in Vanilla Javascript. Below is my html and CSS and I'm not sure how to achieve this in Vanilla Javascript. Can anyone please guide?

.main-nav-list.column{
    column-count: 2;
        column-fill: balance;}

<nav class="main-nav">

    <ul class="main-nav-list">
        <li class="a"> <a href="/">First</a>
            <ul class="main-nav-list">
                <li class="b"> <a href="/">Type of menu</a>
                    <ul class="main-nav-list column">
                        <li class="c"> <a href="/">Summer</a> </li>
                        <li class="c"> <a href="/">Winter</a> </li>
                        <li class="c"> <a href="/">All season</a> </li>
                        <li class="c"> <a href="/">Spring </a> </li>
                                                <li class="c"> <a href="/">Spring </a> </li>
                                                                        <li class="c"> <a href="/">Spring </a> </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Any help will be appreciated.

Thanks in advance.

Solution

To Separate columns based on the Menus, you can try the below script,

  (function columnCount() {
    //get all lists with selected name
    var lists = document.getElementsByClassName("column");

    //loop through all gathered lists
    for (i = 0; i < lists.length; i++) {
      //shorthand elements for easy use
      var list = lists[i];
      var items = list.getElementsByTagName("li");

      list.className += items.length < 5 ? " lesscolumn" : " morecolumn";
    }
  })();

  .lesscolumn {
    column-count: 1;
  }
  .morecolumn {
    column-count: 2;
  }

<nav class="main-nav">

    <ul class="main-nav-list">
        <li class="a"> <a href="/">First</a>
            <ul class="main-nav-list">
                <li class="b"> <a href="/">Type of menu</a>
                    <ul class="main-nav-list column">
                        <li class="c"> <a href="/">Summer</a> </li>
                        <li class="c"> <a href="/">Winter</a> </li>
                        <li class="c"> <a href="/">All season</a> </li>
                        <li class="c"> <a href="/">Spring </a> </li>
                                                <li class="c"> <a href="/">Spring </a> </li>
                                                                        <li class="c"> <a href="/">Spring </a> </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Answered By - Script Host