I'm struggling to organize the data into blocks using Vuetify. When I apply the "bg-red rounded" class to the "v-col", it alters the width of the column, resulting in an undesired grid structure.
Here is the template section of my Vue file. Some data has been omitted for confidentiality reasons.
<template>
<v-container>
<v-row>
<v-col>
<v-container class="bg-red rounded">
<v-list class="bg-red font-weight-bold pa-0">
<v-list-item>
<v-row col="12" no-gutters>
<v-col cols="6"> CODE </v-col>
<v-col cols="1"> {{ `\t:` }} </v-col>
<v-col cols="5"> 5568 </v-col>
</v-row>
</v-list-item>
[Other data here]
</v-list>
</v-container>
</v-col>
<v-col>
[More similar formatting]
</v-col>
</v-row>
[Additional content]
</template>
https://i.sstatic.net/EDKbdHhZ.png
My goal is to add a background color to the empty space in the left column without affecting its width. However, when I try adding background color to both columns, the column widths shift. https://i.sstatic.net/B0sAnQzu.png
Why does this occur? And what is the best method to layout these grids in a visually pleasing way (ensuring that the top block's width matches the bottom block's width)?