How to set column-gap only (not row-gap) with mat-grid-list?

32 views Asked by At

I am trying to set the column-gap for this grid using Angular Material Grid

<mat-grid-list cols="2" rowHeight="114px">
        @for (formItem of formItems; track formItem) {
          <mat-grid-tile
            [colspan]="formItem.colSpan"
            [rowspan]="formItem.rowSpan">
            <irtb-form-item
              [formItem]="formItem"
              [form]="form"
              class="form__body__item"></irtb-form-item>
          </mat-grid-tile>
        }
      </mat-grid-list>

I have tried adding gutterSize but that adds both a row AND column gap. I need my rowHeight to be what it is because we have an error/hint div below each input in the form grid so the 114px height is the biggest I want my rows to be. If I add the gutter, it makes the form way too spaced out, row-wise.

I've tried switching to just a css display=grid but that introduced a bunch of other headaches with my dynamic form, so really hoping I can find a way to just set the column gap on the mat-grid-list

0

There are 0 answers