title: How to display items in a CSS grid with Vue.js
body: <p>I have a list of cars as below:</p>
  <pre><code>&lt;script&gt;
  
  const sampleCars = [
    {
      id: 1,
      name: 'Cressida',
      model: 'XXC',
      manufacturer: 'Toyota',
      price: '$10,000',
      inEditMode: false 
    },
    {
      id: 2,
      name: 'Corolla',
      model: 'ZD-2',
      manufacturer: 'Toyota',
      price: '$12,000',
      inEditMode: false 
    },
    {
      id: 3,
      name: 'Condor',
      model: '27-9',
      manufacturer: 'Mazda',
      price: '$8,000',
      inEditMode: false 
    }
  ]
  
  export default {
    data() {
      return {
        cars: sampleCars
      }
    }
  }
  
  
  &lt;/script&gt;
  
  &lt;style&gt;
  .grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 10px;
  }
  
  &lt;/style&gt;
  </code></pre>
  <p>I want to display the items in a css grid with 5 columns.</p>
  <p>If I use vue code like below:</p>
  <pre><code>&lt;template&gt;
    &lt;div &gt;
      &lt;div class=&quot;grid&quot;&gt;
        &lt;div&gt;Name&lt;/div&gt;
        &lt;div&gt;Model&lt;/div&gt;
        &lt;div&gt;Manufacturer&lt;/div&gt;
        &lt;div&gt;Price&lt;/div&gt;
        &lt;div&gt;buttons&lt;/div&gt;      
      &lt;/div&gt;
      &lt;div v-for=&quot;car in cars&quot; :key=&quot;car.id&quot; class=&quot;grid&quot;&gt;
        &lt;div&gt;{{car.name}}&lt;/div&gt;  // &quot;child div&quot;
        &lt;div&gt;{{car.model}}&lt;/div&gt;
        &lt;div&gt;{{car.manufacturer}}&lt;/div&gt;
        &lt;div&gt;{{car.price}}&lt;/div&gt;
        &lt;div&gt;buttons&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>The problem with this code is that each item is displayed in its own grid. (And therefore not aligned as in image below). Using v-for all car properties become a child of the root div. So essentially I want all &quot;child divs&quot; to be a root of one CSS grid div. How can I achieve that?</p>
  <p><a href="https://i.stack.imgur.com/Hysn9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hysn9.png" alt="enter image description here" /></a></p>
  <p>With VueJS 2</p>