vuetify
vuetify copied to clipboard
refactor: grid system overhaul
Description
Resolves #8611, related to #18846
This PR:
- Swaps VCol/VRow spacing system to use gap instead of negative margin hack
- Generates prefixed set of grid utilities to be independent from utility classes
- Deprecates
denseandno-guttersprops in favour of widely adopteddensityprop
Docs are also updated (both examples and app itself)
Markup:
<template>
<v-app>
<v-main>
<v-container>
<v-row density="compact">
<v-col cols="12">
<v-sheet class="pa-2">
v-col-12
</v-sheet>
</v-col>
</v-row>
<v-row density="comfortable">
<v-col cols="6">
<v-sheet class="pa-2">
v-col-6
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
Swaps VCol/VRow spacing system to use gap instead of negative margin hack
This will break a lot of layouts which is why I put the issue on a major milestone not 3.9.0. Still unsure what the impact of this will be, we need to check a bunch of real examples and see if it's possible to make the required changes automatically.