CODEWITHSUNDEEP
javascriptreactjsmaterial-uigrid
Don Diablo
Don Diablo

Reputation: 51

How to reduce width of Grid column in MUI React?

I have 8 columns in total. First one should be the smallest, to put a checkbox inside and it doesn't need a lot of space. I tried to change the xl, lg, md values to 0.5, but it doesn't work. Is there any other way to change the width of column? Also 4th, 5th and 6th elements should be the same size and fill the empty space after reducing the 1st element's width

enter image description here

Code:

<Grid container spacing={4}>
<React.Fragment>
    <Grid item xl={12} lg={12} md={12} sm={12} xs={12}>

        <Grid item xl={1} lg={1} md={1} sm={12} xs={12}>
            // Element 1
        </Grid>
        <Grid item xl={1} lg={1} md={1} sm={12} xs={12}>
            // Element 2
        </Grid>
        <Grid item xl={2} lg={2} md={2} sm={12} xs={12}>
            // Element 3
        </Grid>
        <Grid item xl={1} lg={1} md={1} sm={12} xs={12}>
            // Element 4
        </Grid>
        <Grid item xl={1} lg={1} md={1} sm={12} xs={12}>
            // Element 5
        </Grid>
        <Grid item xl={1} lg={1} md={1} sm={12} xs={12}>
            // Element 6
        </Grid>
        <Grid item xl={1} lg={1} md={1} sm={12} xs={12}>
            // Element 7
        </Grid>
        <Grid item xl={1} lg={1} md={1} sm={12} xs={12}>
            // Element 8
        </Grid>

    </Grid>
</React.Fragment>

Upvotes: 3

Views: 3058

Answers (2)

Ali Bahaari
Ali Bahaari

Reputation: 510

For auto sizing (#4, #5 and #6), check this out: Auto Layout

And for #1, check this which causes the column fit the content: Width Content

Upvotes: 1

Asad Ullah
Asad Ullah

Reputation: 55

You can use grid's "auto" value for property. Here's an example for your scenario: (Just FYI, you don't need Fragment to wrap single grid container, and no need to wrap all columns in outer "item" grid).

 <Grid container spacing={2}>
      <Grid xs={"auto"} item style={{border: "1px solid #000"}}>
        item 1
      </Grid>
      <Grid xs={1} item style={{border: "1px solid #000"}}>
        item 2
      </Grid>
      <Grid xs={1} item style={{border: "1px solid #000"}}>
        item 2
      </Grid>
      <Grid xs={2} item style={{border: "1px solid #000"}}>
        item 2
      </Grid>
      <Grid xs={2} item style={{border: "1px solid #000"}}>
        item 2
      </Grid>
      <Grid xs={2} item style={{border: "1px solid #000"}}>
        item 2
      </Grid>
      <Grid xs={1} item style={{border: "1px solid #000"}}>
        item 2
      </Grid>
      <Grid xs={1} item style={{border: "1px solid #000"}}>
        item 2
      </Grid>
    </Grid>

Upvotes: 1

Related Questions