[Feature Request] Make style class of 'gap'

[hslee2008]

Problem to solve

When using row, column, flex, grid, we need the attribute gap. This does not exist in vuetify and can help a lot of people with this class.

Proposed solution

gap- or g- with numbers after it to set the gap.

[TutorFx]

That would save a lot of time

[MaximumRGB]

That could be really helpfull!

[karwan01]

that would be helpful

[MetRonnie]

Quick SCSS implementation:

@for $i from 0 through 16 {
  .row-gap-#{$i}, .gap-#{$i} {
    row-gap: $i * 4px;
  }
  .col-gap-#{$i}, .gap-#{$i} {
    column-gap: $i * 4px;
  }
}

[taisto-seppanen]

Quick SCSS implementation:

@for $i from 0 through 16 {
  .row-gap-#{$i}, .gap-#{$i} {
    row-gap: $i * 4px;
  }
  .col-gap-#{$i}, .gap-#{$i} {
    column-gap: $i * 4px;
  }
}

$breakpoints: (
  'xs': 360px,
  // etc
);

@for $i from 1 through 10 {
  .g-#{$i} {
    gap: $i * 4px;
  }
}

@each $breakpoint, $value in $breakpoints {
  @media (min-width: $value) {
    @for $i from 1 through 10 {
      .g-#{$breakpoint}-#{$i} {
        gap: $i * 4px;
      }
    }
  }
}

may be that will be useful

[TheInvoker]

Which version of vuetify is this in?