Vuetify multiple rows align and set the same width - css

Question

How to align multiple rows with col="auto" in Vuetify?
I want to make cols="auto" the same width between multiple rows.
<div id="problem_list" class="text-center">
<v-row>
<v-col cols="auto">
ID
</v-col>
<v-divider vertical></v-divider>
<v-col class="text-left">
Title
</v-col>
<v-divider vertical></v-divider>
<v-col cols="auto">
Ratio
</v-col>
</v-row>
<v-row>
<v-col cols="auto">
1
</v-col>
<v-divider vertical></v-divider>
<v-col class="text-left">
fdkj
</v-col>
<v-divider vertical></v-divider>
<v-col cols="auto">
8
</v-col>
</v-row>
</div>

Answer 1

Try to override some Vuetify CSS rules in order to have the same width whatever the number of columns :
.row{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(64px,auto));
}
please check this codepen sample

Answer 2

Remove the v-divider and cols="auto". Removing cols will make the col auto by default. If you want the dividers, use CSS instead.
Template:
<v-row>
<v-col class="test">
ID
</v-col>
<v-col class="test">
Title
</v-col>
<v-col class="test">
Ratio
</v-col>
</v-row>
<v-row>
<v-col class="test">
1
</v-col>
<v-col class="text-left test">
fdkj
</v-col>
<v-col class="test">
8
</v-col>
</v-row>
CSS:
.test {
border-left: 1px solid lightgray;
}
Codepen
But Judging for what you are trying to do, isn't it just better to just use v-simple-table or v-data-table instead?

Answer 3

Agree with the answer by BakaDesu.
If you want the table to look aligned and also with different column widths, you could add to the BakaDesu code some viewport breakpoints, that will give you the same look that the image you're suggesting but with aligned cols.
I think that using external CSS as Baka is suggesting is a better approach than modifying anything on vuetify base css, that is very probable to come back at you when code gets more complex.
BakaDesu code would look like this with viewport breakpoints.
<div id="app">
<v-app>
<v-content>
<v-container fluid>
<v-row>
<v-col md="1" class="test">
ID
</v-col>
<v-col md="10" class="test">
Title
</v-col>
<v-col md="1" class="test">
Ratio
</v-col>
</v-row>
<v-row>
<v-col md="1" class="test">
1
</v-col>
<v-col md="10" class="text-left test">
fdkj
</v-col>
<v-col md="1" class="test">
8
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
Also, why not using one of the vuetify available components for this matter, like
Simple tables
Data Tables
Data Iterators