[Bug Report][4.2.3] Responsive gap class helpers don't modify necessary css variables for grid layout #23232

Activity

1. github-actions

   added

   S: triage

   on Oct 1, 2026
2. J-Sek

   added

   T: enhancementFunctionality that enhances existing featuresFunctionality that enhances existing features

   C: VGridCovers issues involving VContainer, VLayout, VFlexCovers issues involving VContainer, VLayout, VFlex

   has workaround

   on Oct 1, 2026
3. github-actions

   removed

   S: triage

   on Oct 1, 2026
4. rafaself commented on Oct 5, 2026

   

   rafaself

   on Oct 5, 2026

   Contributor

   More actions

   I think the reported behavior is valid, but I’m not sure gc-* should be expected to behave the same as the VRow gap prop.

   gc-* is a generic spacing utility that maps to column-gap, while VRow uses --v-col-gap-x not only to set the visual gap, but also to calculate each VCol's flex-basis so that columns and gaps still fit within 100% of the row.

   Because of that, making gc-* also mutate --v-col-gap-x would couple a generic CSS utility to an internal detail of VGrid.

   To me, the underlying issue is that VRow currently lacks a grid-aware responsive gap API. Something like gap-md, gap-lg, etc. (or another responsive syntax) could update the internal gap variables correctly while keeping the generic spacing utilities independent.

   So I’d consider this more of an enhancement/API gap in VGrid than a bug in the gc-* utilities.

   ❤️React with ❤️1Reacted by Albert Amat
5. rafaself commented on Oct 5, 2026

   

   rafaself

   on Oct 5, 2026

   Contributor

   More actions

   In short, gc-* only changes column-gap, while VRow's gap also affects the VCol width calculation so the grid still fits within 12 columns.
6. laventnc commented on Oct 5, 2026

   

   laventnc

   on Oct 5, 2026

   Last edited by laventnc

   Author

   More actions

   In short, gc-* only changes column-gap, while VRow's gap also affects the VCol width calculation so the grid still fits within 12 columns.

   Agreed completely, having responsive gap options on VRow would be ideal.
7. J-Sek commented on Oct 5, 2026

   

   J-Sek

   on Oct 5, 2026

   Contributor

   More actions

   Another workaround is to opt-in to "grid" mode (see demos linked in #22630)
8. laventnc commented on Oct 5, 2026

   

   laventnc

   on Oct 5, 2026

   Last edited by laventnc

   Author

   More actions

   Another workaround is to opt-in to "grid" mode (see demos linked in #22630)

   While I think this would be sufficient, and I personally know of a few places already that I would use it, I do feel the main problem is that when using the VRow & VCol grid system there is a gap (no pun intended) in the API once you introduce responsive spacing.

   Without responsive gap properties or the original idea of modifying the --v-col-gap-{x/y} css variables, users will likely stumble upon the same problem, but it surfaces in downstream (potentially responsive breakpoint specific) behavior like columns wrapping that should be on a single line. IMO needing to dive into the css classes to learn why this is wrapping is something that shouldn't be necessary for such a common problem:

   <v-row class="gc-2 gc-lg-4">
     <v-col cols="4" />
     <v-col cols="8" />
   </v-row>

   I believe a solution like this would be pretty easy to implement, clear to document, and inline with the existing API like cols & {breakpoint} overrides:

   <v-row gap="2" gap-lg="4">
     <v-col cols="4" />
     <v-col cols="8" />
   </v-row>
9. J-Sek

   added

   S: maybeFunctionality that we are consideringFunctionality that we are considering

   on Oct 6, 2026
10. J-Sek commented on Oct 6, 2026

    

    J-Sek

    on Oct 6, 2026

    Contributor

    More actions

    It would not hurt to see a quick draft..
11. J-Sek

    linked a pull request that will close this issuefeat(VRow): add responsive gap props #23246on Oct 6, 2026
12. J-Sek

    added this to the v4.3.0 milestone on Oct 6, 2026
13. rafaself commented on Oct 7, 2026

    

    rafaself

    on Oct 7, 2026 · Hidden as duplicate

    show commentMore actions
14. J-Sek

    removed

    S: maybeFunctionality that we are consideringFunctionality that we are considering

    on Oct 9, 2026
15. J-Sek

    self-assigned this

    on Oct 9, 2026
16. J-Sek

    added a commit that references this issue on Oct 9, 2026

    feat(VRow): add responsive gap props (#23246)

    ...

    This issue will close once commit aa892b0 is merged into the 'master' branch.

    aa892b0
17. github-actions

    closed this as completedon Oct 9, 2026