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