Search code examples
htmlcssvue.jscss-multicolumn-layout

CSS display list in columns

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>

enter image description here

But I want it to display like this which child is in the same column:

enter image description here

Any help is appreciated.

Solution 

  • * {
  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 &amp; Wrinkles</li>
            <li>Hydrating</li>
            <li>Dark Spots</li>
            <li>Anti-Aging</li>
            <li>Acne &amp; Blemishes</li>
        </ul>
    </div>
    <div>
        <h5>others</h5>
        <ul>
            <li>Tools &amp; 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 &amp; exfoliator</h5>
        <ul>
            <li>Scrub &amp; Exfoliator</li>
            <li>Face Wash &amp; 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.