Cols not working as expected in Vue

So I'm running Vuejs with Vuetify and with the below code, when there's more than 2 rows worth of data returned to the view it will show them sized as they should be. However when there's an incomplete row's worth of data, each col is shrunk down to be smaller than expected. I can't see why this is happening:

<v-row align="center" justify="center">
            <v-col cols md="11" class="pt-5">
                <v-card class="cardColor d-inline-block mx-auto">
                    <v-card-title class="text-right py-0">
                        <v-row>
                            <v-col cols="5" class="pb-0">
                                <v-select
                                    v-model="sortSelection"
                                    :items="sortBy"
                                    label="Sort By"
                                    class="py-0"
                                    @change="changeOrder"
                                ></v-select>
                            </v-col>
                        </v-row>
                    </v-card-title>
                    <v-card-text>
                        <v-row>
                            <v-card
                                v-for="card in orderedCards"
                                :key="card.id"
                                class="col-3 col-md-3 col-lg-3 pa-0 card"
                                flat
                            >
                                <v-card-text
                                    style="height: 120px"
                                    :style="{
                                        'background-image': backgroundImage(
                                            card.color1,
                                            card.color2,
                                        ),
                                    }"
                                    flat
                                ></v-card-text>
                                <v-row>
                                    <v-col cols="8">
                                        <div class="px-2">
                                            <span>
                                                {{ card.name }}
                                            </span>
                                            <br />
                                            <span>
                                                {{ card.color1 }} &#8594;
                                                {{ card.color2 }}
                                            </span>
                                        </div>
                                    </v-col>
                                    <!-- edit and delete cards -->
                                    <v-col cols="4">
                                        <div>
                                            <v-icon
                                                small
                                                class="mr-2"
                                                @click="showEditDialogue(card)"
                                            >
                                                mdi-square-edit-outline
                                            </v-icon>
                                            <v-icon
                                                small
                                                @click="deleteItem(card)"
                                            >
                                                mdi-delete
                                            </v-icon>
                                        </div>
                                    </v-col>
                                    <!-- *** -->
                                </v-row>
                            </v-card>
                        </v-row>
                        <v-row align="center" justify="center">
                            <v-btn text @click="loadGradients(prevPage)"
                                >Prev</v-btn
                            >
                            Page {{ currentPage }} of {{ lastPage }}
                            <v-btn text @click="loadGradients(nextPage)"
                                >Next</v-btn
                            >
                        </v-row>
                    </v-card-text>
                </v-card>
                <!-- add new entry button -->
                <div class="text-center py-3">
                    <v-btn large color="primary" @click.stop="showNewDialogue()"
                        >Add New Gradient</v-btn
                    >
                </div>
                <!-- new entry modal -->
                <v-dialog v-model="dialog" max-width="700">
                    <v-card>
                        <v-form>
                            <v-container>
                                <v-row>
                                    <v-col cols="12" md="4">
                                        <v-text-field
                                            v-model="card.name"
                                            label="Name of Gradient"
                                        ></v-text-field>
                                    </v-col>

                                    <v-col cols="12" md="4">
                                        <v-select
                                            v-model="card.color1"
                                            :items="colors"
                                            label="First Color"
                                        ></v-select>
                                    </v-col>

                                    <v-col cols="12" md="4">
                                        <v-select
                                            v-model="card.color2"
                                            :items="colors"
                                            label="Second Color"
                                        ></v-select>
                                    </v-col>
                                </v-row>
                            </v-container>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="blue darken-1" text @click="close"
                                    >Cancel</v-btn
                                >
                                <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="saveToServer"
                                    >Save</v-btn
                                >
                            </v-card-actions>
                        </v-form>
                    </v-card>
                </v-dialog>
            </v-col>
        </v-row>