Сложив флажки по вертикали в компоненте mat-grid-tile списка mat-grid-list

Question

Я хочу иметь список сетки с 2 столбцами, и в этих столбцах мне нужны 2 флажка, которые расположены вертикально.

Я видел этот вопрос который в некоторой степени работает, но мне интересно, есть ли более чистый способ обойти это, поскольку мне приходится использовать значительное количество div с, чтобы сделать это ...

Как у меня это работает в данный момент

<mat-grid-list cols=3 rowHeight="50px">
   <mat-grid-tile class="tile">
       <div>
          <div>
            <mat-checkbox>One</mat-checkbox>
          </div>
          <div>
            <mat-checkbox>Two</mat-checkbox>
          </div>
      </div>
   </mat-grid-tile>
   ...
<mat-grid-list>

Answer 1

Добавьте макет flexbox к внешнему DIV и избавьтесь от внутренних DIV:

<mat-grid-tile>
  <div style="display: flex; flex-direction: column;">
    <mat-checkbox>One</mat-checkbox>
    <mat-checkbox>Two</mat-checkbox>
  </div>
</mat-grid-tile>