How can I customize mat-selection-list as mat-grid-list?

Question

I want to customize mat-selection-list with specific columns. It's easy to specify it using mat-grid-list, but in my case i should to use mat-selection-list or other list-selection type.

But I'm not sure it's possible to divide a mat-selection-list in two columns for example.

I developed some code here better to explain my attempt https://stackblitz.com/edit/angular-paezwe

i'm using angular 8 for information

Answer 1

MatListItems have display: block and width: 100% styling so they appear as rows in the list. You can override that to get them to display however you want. For example:

<mat-list-option *ngFor="let item of dataOption" 
    style="display:inline-block; width:50%; text-align:center;">
  {{item.label}}
</mat-list-option>