CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
user14983136
user14983136

Reputation:

How to make Radio buttons of the same Radio group align in several columns in Material UI?

I’m new in the React.js field. So I'm a bit worried about my question on Stackoverflow. I would like everyone to forgive me for my immature question. I tried to find the right answer for my issue, but I couldn’t find it. Now I’m using Fuse React Theme for my one project, I need to align radio buttons of one Radio group in several columns. I have tried in several ways, but those are not the proper ways to handle this, I know. So I don’t write my tries. Here is what I have to do

<RadioGroupFormsy
     className="my-8"
     name="question"
     variant="outlined"
     color="primary"
     value="A"
     required
>
    <FormControlLabel value="A" control={<Radio color="primary"/>} label="A"/>
    <FormControlLabel value="B" control={<Radio color="primary"/>} label="B"/>
    <FormControlLabel value="C" control={<Radio color="primary"/>} label="C"/>
    <FormControlLabel value="D" control={<Radio color="primary"/>} label="D"/>
    <FormControlLabel value="E" control={<Radio color="primary"/>} label="E"/>
    <FormControlLabel value="F" control={<Radio color="primary"/>} label="F"/>
    <FormControlLabel value="G" control={<Radio color="primary"/>} label="G"/>
    <FormControlLabel value="H" control={<Radio color="primary"/>} label="H"/>
    <FormControlLabel value="I" control={<Radio color="primary"/>} label="I"/>
</RadioGroupFormsy>

I would like to align those like this.

A   D   G
B   E   H
C   F   I

Please help me.

Upvotes: 0

Views: 1284

Answers (1)

lissettdm
lissettdm

Reputation: 13080

You can use CSS Grid Layout

styles.css

form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Working example

Upvotes: 3

Related Questions