How to change grid gaps in grid system?

[frederikheld]

Hey everyone,

How would I go about changing the gap between v-cols in vue's grid system? I don't want to apply pa-x to each v-col individually as this is hard to get right for different cols breakpoints (the gap should only be between the cols, not around them).

I tried to apply ga-x to the v-row and it works as it changes the gap between v-cols but it does not compensate for the width of the cols, so the cols will be wider than the v-row and thus break in the wrong place.

Any idea how to do grid gaps right?

Thanks in advance
Frederik

[mapleroyal]

Hey everyone,

How would I go about changing the gap between v-cols in vue's grid system? I don't want to apply pa-x to each v-col individually as this is hard to get right for different cols breakpoints (the gap should only be between the cols, not around them).

I tried to apply ga-x to the v-row and it works as it changes the gap between v-cols but it does not compensate for the width of the cols, so the cols will be wider than the v-row and thus break in the wrong place.

Any idea how to do grid gaps right?

Thanks in advance Frederik

Did you figure this out?

[frederikheld]

Unfortunately not.

I did that part with vanilla HTML/CSS. Luckily it was just a small section of my layout.

[blakegearin]

@KaelWD Could you weigh in on this potentially?

[TorusHelm]

@use 'sass:map;
@import "~vuetify/src/styles/tools";

// extending the row class with the gap control class to flexibly manage the spacing inside a flex block
.row {
  @each $breakpoint in map-keys($grid-breakpoints-custom) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints-custom);

    @include media-breakpoint-up($breakpoint, $grid-breakpoints-custom) {
      @each $name, $gap in $gaps {
        // gap for indents with breakpoint support
        &.g#{$infix}-#{$name} {
          margin: calc(#{-$gap} / 2);

          > [class*="col"] {
            padding: calc(#{$gap} / 2);
          }
        }

        &.g#{$infix}-0 {
          margin: 0;

          > [class*="col"] {
            padding: 0;
          }
        }

        // gap for vertical padding with breakpoint support
        &.gy#{$infix}-#{$name} {
          margin-top: calc(#{-$gap} / 2);
          margin-bottom: calc(#{-$gap} / 2);

          > [class*="col"] {
            padding-top: calc(#{$gap} / 2);
            padding-bottom: calc(#{$gap} / 2);
          }
        }

        &.gy#{$infix}-0 {
          margin-top: 0;
          margin-bottom: 0;

          > [class*="col"] {
            padding-top: 0;
            padding-bottom: 0;
          }
        }

        // gap for horizontal padding with breakpoint support
        &.gx#{$infix}-#{$name} {
          margin-right: calc(#{-$gap} / 2);
          margin-left: calc(#{-$gap} / 2);

          > [class*="col"] {
            padding-right: calc(#{$gap} / 2);
            padding-left: calc(#{$gap} / 2);
          }
        }

        &.gx#{$infix}-0 {
          margin-right: 0;
          margin-left: 0;

          > [class*="col"] {
            padding-right: 0;
            padding-left: 0;
          }
        }
      }
    }
  }
}

$gaps: (
  small: 2px,
  typo: 4px, 
  semi-inner: 6px,
  ingroup: 8px,
  inner: 12px,
  groups: 16px,
  outer: 24px, 
  big-outer: 32px,
  space: 40px,
);

$breakpoint - import from vuetify

use your own $gaps for project
hope it's useful for you, am using vuetify2 but grid system look's the saame for 3 too i gues