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.

scss

@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))
  }
}