Should I use <v-col> or <v-container> for div? - vue.js

Question

I am working on a project that has Vuetify as the design framework. After reading the docs and examples, I am still unsure of how to make my normal design patterns into Vuetify. I have the normal way I'd make a component below but translating it to Vuetify, I am unsure whether or not to use or for each div and just give them a class to put flex on them?
Normally, I would make my component like this:
.product-box-component {
width: 100%;
background-color: grey;
height: 90px;
display: flex;
}
.img-container {
display: flex;
align-items: center;
}
.product-info {
width: 90%;
display: flex;
flex-direction:column;
background:#cecece;
height: 100%;
justify-content: center;
}
.product-name {
align-self: center;
width: 10%
}
.product-price {
align-self: center;
}
<div class="product-box-component">
<div class="img-container">
<img src="https://previews.123rf.com/images/victoroancea/victoroancea1201/victoroancea120100059/12055848-tv-color-test-pattern-test-card-for-pal-and-ntsc.jpg" height="30" width="30"/>
</div>
<div class="product-info">
<div class="name">Prod Name</div>
<div class="color">Blue</div>
</div>
<div class="product-price">
$40
</div>
</div>

Answer 1

I mean there is basically no right or wrong here. I think the benefit of using vuetifys grid system is that you can understand the stylings just from looking at the html. But this can get confusing as well if overdone.
In the middle part you would need to nest multiple v-row and v-col to achieve the flex-column so my prefered way to do this is with the Vuetify flex helpers. I think according to your current workwise (which is also totally fine), you dont have to use vuetify rows and columns at all, but maybe you want to try the flex class helpers. https://vuetifyjs.com/en/styles/flex/. There's a reason they offer both for usage.
<v-row style="height: 90px; width: 100%; background-color: grey">
<v-col class="d-flex align-center">
<img src="https://previews.123rf.com/images/victoroancea/victoroancea1201/victoroancea120100059/12055848-tv-color-test-pattern-test-card-for-pal-and-ntsc.jpg" height="30" width="30"/>
</v-col>
<v-col class="d-flex flex-column justify-center" style="height: 100%; width: 90%; background: :#cecece">
<div class="name">Prod Name</div>
<div class="color">Blue</div>
</v-col>
<v-col align-self="center">
$40
</v-col>
</v-row>