Skip to content

refactor: grid system overhaul #21500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: dev
Choose a base branch
from
Open

refactor: grid system overhaul #21500

wants to merge 14 commits into from

Conversation

AndreyYolkin
Copy link
Contributor

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 AndreyYolkin self-assigned this May 29, 2025
@AndreyYolkin AndreyYolkin added the C: VGrid Covers issues involving VContainer, VLayout, VFlex label May 29, 2025
@AndreyYolkin AndreyYolkin changed the base branch from master to dev May 29, 2025 20:41
@AndreyYolkin AndreyYolkin added the T: enhancement Functionality that enhances existing features label May 29, 2025
@AndreyYolkin AndreyYolkin added this to the v3.9.0 (Zealot) milestone May 29, 2025
@KaelWD
Copy link
Member

KaelWD commented Jun 2, 2025

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.

@@ -133,8 +133,8 @@ export const VCol = genericComponent()({
'v-col': !hasColClasses || !props.cols,
[`v-col-${props.cols}`]: props.cols,
[`offset-${props.offset}`]: props.offset,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still using the global offset util classes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have offset util classes, however it's good to rename to avoid further confusion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VGrid Covers issues involving VContainer, VLayout, VFlex T: enhancement Functionality that enhances existing features
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report] New Grid System Negative Margins
2 participants