Цикл в строках динамического массива с двумя элементами в одной строке

Question

У меня есть динамический массив в файле component.ts, и мне нужно показать его в пользовательском интерфейсе, используя сеточную модель начальной загрузки. Для каждой строки должно отображаться два элемента в одной строке. Размер массива может измениться, если есть только один элемент, то он должен настроить его как полную строку, если их два, то он должен разделить строку пополам (столбец 6). Но если их 3, то только 2 элемента должны быть в одном ряду, а третий будет во втором ряду. Как это будет продолжаться.

                <div class="row">
                    <div class="col" *ngFor="let protocol of protocols">
                       {{protocol.port}}
                    </div>
                </div>