show data in v-for only in 3 rows horizontally - css

Question

i want to show the data in total of 3 rows with the v-for loop
this is the way will be displayed
whats happening is if more data comes in 4th row will be created but i want the data to be displayed only in these 3 rows and on click the next button show the data. i have tried computed properties to send data in chunks but nothing works. Kindly put some light on it
backgrounds:[
{
route:'/events',
img:'/images/events.png',
caption:'Veranstaltungen'
},
{
route:'/',
img:'/images/bilder.png',
caption:'Bildergalerie'
},
{
id:103,
route:'companies',
img:'/images/markenbetriebe.png',
caption:'Vulkanland Markenbetriebe'
},
{
id:101,
route:'companies',
img:'/images/gastro.png',
caption:'Gastronomiebetriebe'
},
{
id:102,
route:'companies',
img:'/images/naechtigungen.png',
caption:'Nächtigung'
},
{
id:115,
img:'/images/buschenschank.png',
caption:'Buschenschenken'
},
{
route:'/',
img:'/images/sehenswuerdigkeit.png',
caption:'Sehenswürdigkeiten'
},
{
id:104,
route:'companies',
img:'/images/bauern.png',
caption:'Direktvermarkter'
},
{
id:106,
route:'companies',
img:'/images/touriteninfo.png',
caption:'Touristeninformation'
},
{
id:109,
route:'companies',
img:'/images/kulture.png',
caption:'Kulturhäuser'
},
{
id:107,
route:'companies',
img:'/images/sport.png',
caption:'Sport und Spiel'
},
{
id:113,
route:'companies',
img:'/images/handel.png',
caption:'Handelsbetriebe'
},
{
id:114,
route:'companies',
img:'/images/gewerbebetriebe.png',
caption:'Gewerbebetriebe'
},
{
route: '/',
img:'/images/Button-1.png',
caption:'Schaukästen'
},
]

Answer 1

This is the code for a naive and quick 3 elements per row display
<template>
<section class="three-elements-per-row">
<div
v-for="background in backgrounds"
:key="background.route"
class="element"
>
{{ background.caption }}
</div>
</section>
</template>
<script>
export default {
data() {
return {
backgrounds: [
{
route: '/events',
img: '/images/events.png',
caption: 'Veranstaltungen',
},
{
route: '/',
img: '/images/bilder.png',
caption: 'Bildergalerie',
},
{
id: 103,
route: 'companies',
img: '/images/markenbetriebe.png',
caption: 'Vulkanland Markenbetriebe',
},
{
id: 101,
route: 'companies',
img: '/images/gastro.png',
caption: 'Gastronomiebetriebe',
},
{
id: 102,
route: 'companies',
img: '/images/naechtigungen.png',
caption: 'Nächtigung',
},
{
id: 115,
img: '/images/buschenschank.png',
caption: 'Buschenschenken',
},
{
route: '/',
img: '/images/sehenswuerdigkeit.png',
caption: 'Sehenswürdigkeiten',
},
{
id: 104,
route: 'companies',
img: '/images/bauern.png',
caption: 'Direktvermarkter',
},
{
id: 106,
route: 'companies',
img: '/images/touriteninfo.png',
caption: 'Touristeninformation',
},
{
id: 109,
route: 'companies',
img: '/images/kulture.png',
caption: 'Kulturhäuser',
},
{
id: 107,
route: 'companies',
img: '/images/sport.png',
caption: 'Sport und Spiel',
},
{
id: 113,
route: 'companies',
img: '/images/handel.png',
caption: 'Handelsbetriebe',
},
{
id: 114,
route: 'companies',
img: '/images/gewerbebetriebe.png',
caption: 'Gewerbebetriebe',
},
{
route: '/',
img: '/images/Button-1.png',
caption: 'Schaukästen',
},
],
}
},
}
</script>
<style scoped>
.three-elements-per-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.element {
background: seagreen;
border: 2px solid paleturquoise;
}
</style>
And this is how it looks
Quick guide on CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/
That one is maybe a more flexible solution overall (more responsive).