vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

refactor: grid system overhaul

Open AndreyYolkin opened this issue 7 months ago • 1 comments

Description

Resolves #8611, related to #18846

This PR:

  1. Swaps VCol/VRow spacing system to use gap instead of negative margin hack
  2. Generates prefixed set of grid utilities to be independent from utility classes
  3. Deprecates dense and no-gutters props in favour of widely adopted density prop

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>

AndreyYolkin avatar May 29 '25 20:05 AndreyYolkin

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.

KaelWD avatar Jun 02 '25 09:06 KaelWD