Showing a list in CSS with multiple columns

I am working with a list created using Vue.js

Check out the code snippet below:

<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>

https://i.sstatic.net/C2Fqe.png

I would like to change the layout to have each child displayed in its own column, similar to the image linked below:

https://i.sstatic.net/kr2wi.png

If anyone can provide assistance, it would be greatly appreciated.

htmlcssvue.jscss-multicolumn-layout

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 &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>

Discover in this demonstration that adjusting the height (css) affects the placement of the menu. Experiment with each CSS property in section and div to gain a deeper understanding.

To learn more about flex, visit this resource. For insights on utilizing grid, check out this guide.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting information via jQuery

https://i.stack.imgur.com/VU5LT.jpg Currently, I am working on integrating an event planner into my HTML form. However, I am facing difficulty in transferring the data ("meetup", "startEvent", "break") from HTML to my database. Using jQuery, I was able to ...

javascriptjqueryhtml

Having trouble scaling image with CSS, not reacting to size properties

I have little experience in web development, but a small business client has me working on their website while I handle other tasks for them. I've created a home page design that is almost ready to be turned into a template for the chosen CMS. Things ...

htmlcssimage

Artistically connect the main navigation bar to the secondary one

I am currently working on developing a responsive website. I am following the "content first" methodology, starting with designing for the smallest mobile layout. The homepage of the site (still under construction) looks something like this: When a user c ...

jqueryhtmlcss

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...

phpcssaddclass

Header media query in CSS3 not functioning as expected

Currently, I have two separate style sheets for mobile and desktop versions. My intention is to default to the mobile style sheet. Upon examining my header, I have included the following: <link rel='stylesheet' media='all' href=&ap ...

cssmobileresponsive-designmedia-queries

How can I modify the TextField's borderBottom style to be 'none' when it is disabled?

While working within a data cell, I encountered an issue with stacking text. To workaround this obstacle, I opted to create a text field, assign it a value and helper text, disable the field, and change the text color to black when disabled. My current cha ...

cssreactjsmaterial-ui

Dynamic Loading of CSS Styles

My style-sheet is saved in this unique location: /opt/lampp/htdocs/project/core/styles/Style.css To load the CSS file using the full directory, considering that the files utilizing it are situated here: /opt/lampp/htdocs/project/client/ The ultimate ob ...

javascriptphpjqueryhtmlcss

Explore lengthy content within Angular 2 programming

I have a lengthy document consisting of 40000 words that I want to showcase in a visually appealing way, similar to HTML. I aim to include headers, paragraphs, and bold formatting for better readability. Currently, I am developing an Angular application. D ...

htmlangulartext

What causes the vuetify tag not to render as HTML in the browser?

I ran into a styling issue while using Vuetify in my Nuxt 2 project. Upon inspecting the element in dev tools, I noticed that some Vuetify tags were not being converted to HTML as expected (they were displayed as div class="tag_name"). These unco ...

htmlvue.jsnpmnuxt.jsvuetify.js

A compatibility issue between jQuery and Internet Explorer 7

, you can find the following code: $("body").delegate('area[id=area_kontakt]','mouseover mouseleave', function(e){ if (e.type == 'mouseover') { $("#kontakt_tip").css('display','block'); } else { $( ...

jqueryhtmlcsscross-browserinternet-explorer-7

Resizing an HTML table causes the background to break

I have incorporated a tailwind table with a max-width setting. In my html, I am utilizing the default Laravel Jetstream layout. However, I am facing an issue wherein the background doesn't repeat in the browser when trying to use the scrollbar on sma ...

htmlhtml-tablebackgroundtailwind-css

Steps for clearing a set of checkboxes when a different checkbox is selected

While working on a website I'm developing, I encountered an issue with the search function I created. The search function includes a list of categories that users can select or deselect to filter items. This feature is very similar to how Coursera has ...

javascripthtmldomwebcheckbox

What is the main file that vue-cli-service utilizes for entry?

Interested in a project utilizing vue, webpack, babel, npm? You can launch it with npm run server. While exploring how this command functions, I came across vue-cli-service serve in the package.json file. But how exactly does vue-cli-service initialize ...

javascriptvue.jswebpackvue-cli

Leveraging the jQuery click function to toggle elements on a webpage by referencing the current element with the keyword "this

I've been trying to implement a click event that toggles an element unrelated to the selected item's parent or child. I want to utilize "this" because there are multiple elements with the same class where I'd like to apply the same jQuery cl ...

jqueryhtmltoggle

The code is not displaying correctly in Chrome, but it works fine when viewed on a live server

While developing a webpage in Vscode, I noticed that all my CSS and Bootstrap SASS styles render correctly. However, when opening the page without using Vscode live server, some of the styles are not being applied. ...

htmlcssbootstrap-4

The outcomes I receive from Graphql playground versus the front-end are not consistent with each other

I am currently utilizing graphql and Vue.js in conjunction with apollo Displayed below is my DateBank information const sensorsdb = [ { name: "sensor 1", id: "s-1", timestamp: 1582021371, value: 100 }, { name: " ...

vue.jsgraphqlapollo

Dynamic drop-down navigation with rearranging menu

I am attempting to design a drop-down navigation bar with 2 rows. Initially, only 1 row is visible. Upon clicking the visible row, both rows should appear. Subsequently, when one of the 2 rows is clicked, only that specific row should be displayed. Below a ...

javascripthtmlcssdrop-down-menunavigation

Secure Social Security Number (SSN) Input Field showing only the final four digits | includes option to show/hide

I need to show only the last four digits of the SSN and mask the rest with asterisks, like: ****-**-7654 Additionally, I want to implement a toggle functionality where users can reveal or hide the masked characters behind the asterisks. <in ...

jquerycssbootstrap-5

Bootstrap glyphicon not in sync with input field alignment

Having an issue with aligning the upper border of a search input field when using Angular with Bootstrap and adding a glyphicon next to it. div.input-group(ng-show='feeds.length > 0') span.input-group-addon.glyphicon.glyphicon-search in ...

cssangularjstwitter-bootstrap-3pug

Tips for adding a CSS class to an element while excluding any nested or child elements with the same style

Hey, I'm having some trouble applying a style to a body element without affecting a specific nested element selected by a certain selector. I attempted to use the :not pseudo-class but it doesn't seem to work for child elements. Here's an ex ...

css