grid leads to scrollbar in dialogs

[Timmeeeey]

When you use grid inside a component that is used in a dialog then there is always a vertical scrollbar.

<p-dialog header="Header" [visible]="true">
  <app-test></app-test>
</p-dialog>

app-test:

<div class="grid">
  <div class="col">Test</div>
</div>

https://stackblitz.com/edit/primeng-dialog-demo-kefssx

[Timmeeeey]

As a workaround (to get rid of the negative margins in grid class) I replaced css flex with css grid. This works only for 12 column layout (col-{number} and col-offset-{number}) and not for fixed width columns (col-fixed) or auto width columns (col) but I don't use col-fixed or col.

@mixin column-span {
  @for $i from 1 through 12 {
    &-#{$i} {
      flex: initial;
      padding: 0;
      width: initial;
      grid-column: span $i;
      @for $j from 1 through 12 {
        &.col-offset-#{$j} {
          margin: 0 !important;
          grid-column: calc($j + 1) / span $i;
        }
      }
    }
  }
}
.grid {
  display: grid;
  flex-wrap: initial;
  gap: 1rem;
  margin: 0 0 0.5rem 0;
  grid-template-columns: repeat(12, 1fr);
}
.col {
  @include column-span;
}
@media screen and (min-width: 576px) {
  .sm\:col {
    @include column-span;
  }
}
@media screen and (min-width: 768px) {
  .md\:col {
    @include column-span;
  }
}
@media screen and (min-width: 992px) {
  .lg\:col {
    @include column-span;
  }
}
@media screen and (min-width: 1200px) {
  .xl\:col {
    @include column-span;
  }
}

[mertsincan]

Hi,

Please use grid-nogutter class.

<div class="grid grid-nogutter">
  <div class="col">Test</div>
</div>

[Timmeeeey]

@mertsincan Hi, with grid-nogutter the padding between cells is gone. Is there a way to get the padding back?