What is the best way to showcase a list in a column layout using Vue.js 3?

To provide a clearer understanding, let's illustrate with an example using the Bootstrap grid system.


When there is only 1 item in the list:

<div class="container">
  <div class="row">
    <div class="col-sm-12">item 1</div>
  </div>
</div>

If there are 2 items in the list:

<div class="container">
  <div class="row">
    <div class="col-sm-6">item 1</div>
    <div class="col-sm-6">item 2</div>
  </div>
</div>

In case of 3 items in the list:

<div class="container">
  <div class="row">
    <div class="col-sm-4">item 1</div>
    <div class="col-sm-4">item 2</div>
    <div class="col-sm-4">item 3</div>
  </div>
</div>

For lists with 4 or more items, the structure is similar to having 3 items but new rows are created accordingly. For instance:

  • 4 items will use 2 rows
  • 8 items require 3 rows

Answer â„–1

The issue at hand is not related to JavaScript but can be easily resolved with a crash course in CSS. The confusion seems to stem from the focus on the "row". It's important to approach this problem by creating a grid container that specifies each row can hold a maximum of 3 items. For instance, if you insert 7 children into the container, you will have 2 complete rows and 1 partially filled row. Let me illustrate.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
}

The use of 1fr denotes that each item should have equal width. The number 3 before it indicates the quantity of items in the repeat() function.

Example

Following your example closely, I've provided several demonstrations. In this second example, I show how you can identify every "row", which consists of every 3n elements, and set its column width using CSS.

/* If the last row has only one item, that item should span three columns. */
.grid-container > :nth-child(3n+1):last-child {
  background: red;
  grid-column: span 3;
}

<button onclick="addItem()">+</button>
<button onclick="removeItem()">-</button>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
</div>

Example #3

In addition to the previous examples, I implemented what should occur when there are 2 columns left in the last row. This scenario presents a challenge as fractional values cannot be specified in grids. Hence, I adjusted the total column width to accommodate the situation—each column being 2 units wide allows us to fit 3 columns within the grid. Therefore, the width of an item in the last row is determined by the number of items present: either 6 or 3 columns wide.

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 columns */
}

...

<button onclick="addItem()">+</button>
<button onclick="removeItem()">-</button>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>


Note: The inclusion of JavaScript functions and buttons was purely for demonstration purposes; my solution primarily relies on CSS for efficiency. There's no need to worry about array changes or looping tasks.

By solely utilizing CSS in my solution, modifications to the list array are unnecessary, and there's no requirement for running loops.

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

Making JavaScript Code More Efficient with VueJS and VUEX

Keeping my Javascript code clean and concise is a top priority for me. I always strive to condense my code so that it remains clutter-free without sacrificing functionality. Take a look at my vuex-mutation code below: editEvent(state) { if (state.for ...

Discovering visible ID numbers on the screen

My content includes the following: <div id="sContainer"> <div class="message0" id="l0">Initial Content 111</div> <div class="message1" id="l1">Initial Content 222</div> <div class="message2" id="l2">Initial ...

`Enhancing URL appearance in VueJS`

I am working on a simple Single Page Application (SPA) where the front end is developed using VueJS and it consumes an Express API. Right now, my resource routes follow the pattern .../users/:id However, I would like to change it so that instead of havin ...

Enhancing the appearance of dropdown menus for WooCommerce Variable products with custom CSS styling

I currently have a Wordpress website with WooCommerce and several variable products. Each product's variation has a dropdown menu that displays different options when clicked. My main concern is how to customize the appearance of these dropdown menus ...

Sass compilation failed due to an error in the CSS code provided

Just starting out with sass, I recently downloaded bulma, installed gem, and sass. My attempt to compile a default sass file using sass style.scss style.css resulted in errors. Here is my directory structure: https://i.sstatic.net/0OZSR.png However, I en ...

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried usi ...

Sending information to the component of a route using the beforeEnter function

I am working with the VueRouter and have the following route configuration: { path: '/playlists/:id', name: 'videos', component: Video, props: { videos: [], }, beforeEnter(to, from, next) { Vue.axios .get(&apos ...

A guide on displaying an array object in a table column using Vue.js and Element UI

Having issues with rendering array data in Vue Js Element UI using the el-table-column element. The string data displays correctly, but I'm facing problems with the array data. I've attempted to include static data within the data() return method ...

Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Is there a way to isolate elements within a div, similar to how it would behave in an iFrame? I am facing issues with the global SharePoint styles affecting my app inside SharePoint. I want to completely disable these global styles so that my app only use ...

Is it possible to disable the pointer event on the parent element only in CSS

Here's the structure I'm working with: <div class='offline'>some text <button class='delete'>Delete</button></div> I want to disable the div using pointer-events: none, but still keep the button activ ...

Problem displaying images in Mean stack app using CSS background-image and Webpack

Currently, I am enhancing my skills by working on my own projects. One of the projects I'm focused on right now is designing a MEAN-stack app that utilizes Webpack. In the past, I encountered an issue where I couldn't display images in my app. Ho ...

Vue.js: Dynamically set button activation based on array size

I have been attempting to enable or disable a button based on the length of an array, and here is my code: <button class="submit-button" type="button" v-on:click="DoSomething()" :disabled="array.length > 0">Submit</butt ...

Implementing a progress loader in percentage by simultaneously running an asynchronous setTimeout counter alongside a Promise.all() operation

I'm encountering a problem running an asynchronous setTimeout counter simultaneously with a Promise.all() handler to display a progress loader in percentage. Here are the specifics: I've developed a Vue application comprised of three components ...

Strangely glitchy navigation bar using jQuery

Over at this website, there's a top navbar that shrinks using jQuery when scrollTop exceeds 100px. The functionality works as intended, but there's an annoying stutter issue where the navbar starts jumping up and down erratically after slight scr ...

The input value linked with Vue is not displaying on the DOM

I am attempting to connect a property of an item within an array in the data object of Vue to the value attribute of an input tag using binding. However, when I inspect the DOM of a web browser, it does not display. <template v-for="role in roles"> ...

Display the scrollbar within a flexitem by utilizing flexbox styling

I am currently setting up my HTML website with Bootstrap flex and I have a specific layout in mind. I want the inner div to have scrollbars while the outer div fills up the rest of the page. Take a look at this example: <div class="d-flex align-items- ...

Challenges with jQuery Image Sliders

Currently, I am learning from a tutorial on creating a custom jQuery content slider and you can find the tutorial here. Everything is working smoothly in terms of creating the image slider. However, I am facing an issue where I want to have the 'Next ...

Automatically set the margin for the initial element with flex-grow

In the scenario presented, there is a navigation structure utilizing two flexbox containers. The flex-grow property allows the navigation to stretch and fit the main wrapper, which in this case has a width of 100%. Here is the HTML code: <!DOCTYPE htm ...

What is the method for incorporating backdrop, escape, and header close triggers in a Bootstrap-Vue modal?

Currently, I am utilizing the bootstrap-vue modal in my project. I now have a requirement to implement validation when a user attempts to close the modal. Specifically, I need to display a confirmation message asking, "Are you sure you want to close withou ...

Adding a bootstrap label on the corner of a div using overlay technique

I'm attempting to superimpose a bootstrap label in the corner of a DIV. My goal is to position the label in the top left corner of the div, partially overlapping it. Thank you <div class="span4" style="border-bottom: none; border-top: 4px s ...