Angular 12 how to display dynamically loaded checkbox values in 3 columns?

Question

I'm using Angular 12 and "typescript": "~4.3.5". I'm dynamically loading checkbox values. Right now all values are displaying in single column as they load. I need to display them in 3 columns.

template:
  LoadControls() {
        const controls = this.options.map(c => new FormControl(true));
        this.ReportsForm = this.formBuilder.group({
            options: new FormArray(controls)
        });
  // How does code below works?
    //var groups = asEnumerable(this.options)
    //    .Select((option, id) => { return { option, id }; })
    //    .GroupBy(
    //        x => Math.floor(x.id / 3),
    //        x => x.option,
    //        (key, options) => asEnumerable(options).ToArray()
    //    )
    //    .ToArray();
        this.isFormReady = true;
    }

html:
    <div class="form-group">
        <label class="col-12 control-label margin-bottom">
            Select {{selectedContactStream.HRContactStream}} Assets
        </label>
        <div class="col-4" formArrayName='options'
             *ngFor="let option of optionArrayControl; let i = index">
            <input [formControlName]="i" type="checkbox" /> {{options[i].DataText}}
        </div>
    </div>

Please advise! p.s. I added some commented code which I found somewhere. I do no know if asEnumerable is part of typescript or linq and what to import to make it work.