How to show each nested list in a seperate column, preferrably while using CSS Grid?

I have some nested lists. Some go as deep as 4-5 level deep. For example:

<ul>
    <li>
        <span class="is-parent">parent</span>
        <ul class="children">
            <li class="no-child">child</li>
            <li class="no-child">child</li>
            <li class="no-child">child</li>
        </ul>
    </li>
    <li>some child</li>
    <li>another child</li>
<ul>

This list is displayed in a css grid column, the first one to be specific. I have set the columns using

grid-template-columns: repeat(5, 1fr);

When I click on parent, I want the nested <ul> to display on the next column. What is the best way to do that using vanila JavaScript?