Skip to content

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

Merged
J-Sek merged 3 commits into
devfrom
feat/grid-responsive-gap
Oct 9, 2026
Merged

J-Sek merged 3 commits into
devfrom
feat/grid-responsive-gap

Conversation

@J-Sek

@J-Sek J-Sek commented Oct 6, 2026

Copy link
Copy Markdown
Contributor

Adds gap-{sm/md/lg/xl/xxl} props to VRow

resolves #23232

<template>
  <v-app theme="dark">
    <v-container>
      <h3 class="mb-2">VRow responsive gap ({{ $vuetify.display.name }})</h3>
      <v-row :gap="[4, 4]" :gap-lg="40" :gap-md="[16, 8]" class="mb-8">
        <v-col v-for="n in 6" :key="n" cols="12" md="4" sm="6">
          <v-sheet class="pa-3" color="primary">gap 4 → md [16, 8] → lg 40</v-sheet>
        </v-col>
      </v-row>
      <v-row class="mb-8" density="compact" gap-lg="32">
        <v-col cols="4"><v-sheet class="pa-3" color="secondary">compact → lg 32</v-sheet></v-col>
        <v-col cols="8"><v-sheet class="pa-3" color="secondary">must stay on one line</v-sheet></v-col>
      </v-row>
      <v-row gap-md="48" no-gutters>
        <v-col cols="6">
          <v-sheet class="pa-3" color="surface-variant">no-gutters → md 48</v-sheet>
          <v-row class="mt-2">
            <v-col><v-sheet class="pa-3" color="info">nested, default gap</v-sheet></v-col>
            <v-col><v-sheet class="pa-3" color="info">nested, default gap</v-sheet></v-col>
          </v-row>
        </v-col>
        <v-col cols="6"><v-sheet class="pa-3" color="surface-variant">no-gutters → md 48</v-sheet></v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

@J-Sek J-Sek self-assigned this Oct 6, 2026
@J-Sek J-Sek added T: enhancement Functionality that enhances existing features C: VGrid Covers issues involving VContainer, VLayout, VFlex labels Oct 6, 2026
Comment thread packages/api-generator/src/locale/en/VRow.json Outdated
Comment thread packages/api-generator/src/locale/en/VRow.json
@J-Sek
J-Sek merged commit aa892b0 into dev Oct 9, 2026
16 checks passed
@J-Sek
J-Sek deleted the feat/grid-responsive-gap branch October 9, 2026 22:01
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][4.2.3] Responsive gap class helpers don't modify necessary css variables for grid layout

2 participants