Question 372381 in CSS Question posted in
Some basic documentation can be found here.

Css – How to display list in columnar fashion in Vue.JS v3?

might be best explain with an example (using bootstrap grid)

Thanks in advance for the assistance

1 item in list

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

2 items in 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>

3 items in 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>

4+ items in list, same as 3 items in list except new rows are created

  • 4 items / 3 = 2 rows are used
  • 8 items / 3 = 3 rows are used
Tags:

2

Answers


  1. 0

    The question has little to do with JavaScript. This is a problem that can be quickly overcome with a CSS crash course. The puzzlement arises from your insistence on the "row". Incorrect approach. The correct approach is to create a grid container, specifying that 1 row can contain a maximum of 3 items. If you insert, for example, 7 children into it, there will be 2 complete rows and 1 started row. Let me demonstrate.

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

    The width of 1fr means that each item should have the same width. The number 3 preceding it signifies the quantity of items in the repeat() function.

    Example

    function addItem() {
  const gridContainer = document.querySelector('.grid-container');
  const newItem = document.createElement('div');
  newItem.classList.add('grid-item');
  newItem.textContent = 'Item ' + (gridContainer.childElementCount + 1);
  gridContainer.appendChild(newItem);
}

function removeItem() {
  const gridContainer = document.querySelector('.grid-container');
  const lastItem = gridContainer.lastElementChild;
  if (lastItem) {
    gridContainer.removeChild(lastItem);
  }
}
    .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 10px; /* gap between grid items */
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}
    <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>
    Login or Signup to reply.
  2. 0 
    const { createApp, ref } = Vue;

const HelloVueApp = {
  setup() {
    const data = [1,2,3,4,5,6,7];
    const list = ref([]);
    for (var i = 0; i < data.length; i+=3) {
      list.value.push(data.slice(i, i+3));
    }
    return {
      list
    };
  }
}

createApp(HelloVueApp).mount('#root')
    <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>

<div id="root" class="container">
  <div v-for="row in list" class="row">
    <div v-for="it in row" class="col-sm-4">
      item {{ it }}
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search