I'm having trouble organizing my Vuex data with CSS GRID. It's turning out messy.
My setup includes two columns: the first one for labels and the second for values.
{{$store.state.stepOne.textfield[idx].label}}
The code above is used to display labels, while below is used to display values:
{{$store.state.stepOne.textfield[idx].value}}
Here is a snippet of my HTML structure:
.display-data
span(
v-for='(item, idx) in $store.state.stepOne.textfield'
:key='idx'
) {{$store.state.stepOne.textfield[idx].label}}
span(
v-for='(item, idx) in $store.state.stepOne.textfield'
:key='idx'
) {{$store.state.stepOne.textfield[idx].value}}
For styling using CSS grid:
.display-data
display: grid
grid-template-columns: 1fr 1fr
grid-template-rows: repeat(25, 1fr)
grid-gap: 15px 15px
margin: 0 auto 50px auto
width: 700px
justify-items: center
I aim to achieve a layout similar to the image shown here: https://i.stack.imgur.com/ckRWG.png