Show formArray inputs in multiple columns

I have created a formArray table and now I am trying to show only 4 rows in 4 columns because I have an array that contains only 4 regions so I made a combinations of region with each other region and with itself using a nested loop with O(n)^2 complexity which gave me 16 combinations and on initializating the formarray all the input fields show up in first column which should not be the case. I need to show only 4 in each column. I am using Angular material, So how can i achieve this? Here is my html code

<div *ngIf="enableCombinationDirective">
  <div fxLayout="row">
      <div class="h1">Add Prices</div>
      <div [formGroup]="combinationForm">
        <div formArrayName="dest" *ngFor="let item of combinationForm.get('dest')['controls']; let i = index">
          <div fxLayout="row" class="check" fxLayoutAlign="space-evenly">
            <mat-form-field appearance="outline" [formGroupName]="i" style="width: 20% !important;" apprearance="outline" fxFlex="50">
              <mat-label>{{
                combinationForm
                    .get("dest")
                    ["controls"][i].get("combinationTitle").value
            }}</mat-label>
            <input
                          matInput
                          type="number"
                          #destInput
                          formControlName="price"
                          placeholder="Enter Price"
                      />
                      <mat-checkbox
                      formControlName="isActive"
                      matSuffix
                  ></mat-checkbox>
            </mat-form-field>
          </div>
        </div>
        <div fxLayout="row">
          <button
              fxFlex="100"
              mat-raised-button
              color="primary"
              (click)="save()"
          >
              Save Changes
          </button>
      </div>
    </div>
  </div>
</div>

The form works fine and i am able to fetch data from it too. here is how it looks

here is how i am initializing it

 createCombinations() {
    let arrayOfData = [];
    arrayOfData.push({
      volumeSlabType: this.combinationSelectionForm.value.volumeSlab, 
      serviceType: this.combinationSelectionForm.value.serviceType,
      weightSlab: this.combinationSelectionForm.value.weightSlab,
      region: this.getRegionsCombinations(this.combinationSelectionForm.value.region)
    });

    this.data = arrayOfData;
    this.data[0].region.forEach((reg, i) => {
      const fArray = this.combinationForm.get("dest") as FormArray;
      fArray.push(this.createForm(reg, i));
    });
    console.log(this.data);
  }

  createForm(dest: any, index): FormGroup {
    let group: FormGroup;

    if(this.data) {
      group = this._fb.group({
        combinationTitle: [dest.combinationTitle],
        regionId: [dest.regionId],
        price: [],
        isActive: [false],
      });
    }
    return group;
  }

  getFormData(data): FormGroup {
    return data[0].region;
  }

  getRegionsCombinations(region) {
    let selectedRegion: IRegion[] = this.regions.filter((data) => data.id === region);
    let regionCombination = [];
    this.regions.forEach((region) => {
      this.regions.forEach((rData) => {
        regionCombination.push({
          combinationTitle: `${region.name} - ${rData.name}`,
          regionId: rData.id,
          price: 0
        });
      });
    });
    return regionCombination;
  }