Grid Legacy Mode
Vuetify 4 introduces an overhaul to the grid system utilizing CSS gap instead of negative margins on rows and padding on columns. If you need to maintain compatibility with the previous layout behavior, you can use the CSS overrides below.
Differences between old and new
| Previous | New |
|---|---|
| Negative margins in VRow | CSS gap property |
| Column spaced by padding | No padding (gap handles spacing) |
Simple percentage (e.g. flex: 0 0 75%) | Calculated width accounting for gaps |
Internal class names changed as well
| Previous | New |
|---|---|
.v-row--dense | .v-row--density-comfortable |
.v-col-{n} | .v-col--cols-{n} |
.v-col-{breakpoint}-{n} | .v-col--cols-{breakpoint}-{n} |
.offset-{n} | .v-col--offset-{n} |
CSS Override
Add the following CSS to your application to restore the legacy grid behavior.
@layer vuetify-overrides {
.v-row {
gap: unset;
margin: calc(var(--v-col-gap-y) * -.5) calc(var(--v-col-gap-x) * -.5);
}
.v-row + .v-row {
margin-top: calc(var(--v-col-gap-y) * .5);
}
.v-col {
padding: calc(var(--v-col-gap-y) * .5) calc(var(--v-col-gap-x) * .5);
flex-basis: var(--v-col-is-size, calc(100% * var(--v-col-size) / var(--v-col-size-columns))) var(--v-col-is-auto, auto) var(--v-col-is-grow, 0);
}
.v-col:where([class*='v-col--offset-']) {
margin-inline-start: calc(100% * var(--v-col-offset) / var(--v-col-size-columns))
}
}
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.