[Fixed] Angular Material: Radio Button Alignment


I have the following HTML that looks something like this.

<mat-radio-group aria-label="Select an option">
    <mat-radio-button>Sample 1</mat-radio-button>
    <mat-radio-button>Sample 2</mat-radio-button>
    <mat-radio-button>Unknown Sample</mat-radio-button>
<mat-radio-group aria-label="Select an option">

The radio buttons look like this:

Radio Buttons

I would like to modify the CSS so that the buttons of the two different groups line up vertically but I am stumped as to how I can make that happen.

Any advice would be appreciated!

What i'm trying to achieve

This is what I want it to look like. Is there any way to do this without adding whitespace manually?


You can use display: grid to achieve this:

.mat-radio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

is all that you need. It will convert each radio group into three columns of 1 fragment. Read more about Grid Layout and grid-template-columns at MDN.

In case you have global styling enabled: be aware that you might need to use an additional CSS class, and not .mat-radio-group, so the styling won’t be applied everywhere you use radio groups.

Using display grid to show mat-radio-group

Here’s a StackBlitz example to show above.

Leave a Reply

(*) Required, Your email will not be published