CSS display list in columns - html

Question

I have a list which is made by Vue.js
Here is my code:
<ul>
<li
v-for="category in item.children"
:key="category.id"
class="menu-item"
>
<nuxt-link
:to="
localePath(
`/category/${category.slug}/${category.id}`
)
"
>
<h5>{{ category.lang[0].name }}</h5>
</nuxt-link>
<ul class="mega-menu__list">
<li
v-for="subItem in category.children"
:key="subItem.id"
>
<nuxt-link
:to="
localePath(
`/category/${subItem.slug}/${subItem.id}`
)
"
>
{{ subItem.lang[0].name }}
</nuxt-link>
</li>
</ul>
</li>
</ul>
But I want it to display like this which child is in the same column:
Any help is appreciated.

Answer 1

* {
font-family: "Arial";
font-size: 15px;
margin: 0;
padding: 0;
}
section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 450px;
height: 800px;
margin: 0 auto;
}
div {
display: flex;
flex-direction: column;
padding: 15px 30px;
}
h5 {
margin-bottom: 20px;
text-transform: uppercase;
}
ul {
list-style: none;
}
li {
line-height: 30px;
}
<section>
<div>
<h5>shop by concern</h5>
<ul>
<li>Pores</li>
<li>Whitening</li>
<li>Fine Lines & Wrinkles</li>
<li>Hydrating</li>
<li>Dark Spots</li>
<li>Anti-Aging</li>
<li>Acne & Blemishes</li>
</ul>
</div>
<div>
<h5>others</h5>
<ul>
<li>Tools & Accessories</li>
<li>Beauty Supplements</li>
</ul>
</div>
<div>
<h5>skincare package</h5>
</div>
<div>
<h5>treatment</h5>
<ul>
<li>T-Zone &vert; Blackhead</li>
<li>Ampoule</li>
<li>Acne &vert; Blemishes</li>
<li>Serum</li>
<li>Pore Care</li>
<li>Lip Care</li>
<li>Eye Care</li>
</ul>
</div>
<div>
<h5>cleanser & exfoliator</h5>
<ul>
<li>Scrub & Exfoliator</li>
<li>Face Wash & Cleansers</li>
<li>Soap</li>
</ul>
</div>
<div>
<h5>sun care</h5>
</div>
<div>
<h5>moisturizer</h5>
<ul>
<li>Mist Spray</li>
<li>Cream</li>
<li>Moisturizer / Lotion</li>
</ul>
</div>
<div>
<h5>toner</h5>
</div>
</section>
See in my example, that if you have enough height (css), a menu will try to get there, if not, it will go to the right (because it has space to go there because of flex-wrap: wrap. Play with each CSS property in section and div, and you will understand more.
You can see more about flex here. And if you want to try out grid, here.