How do I make this into 4 column in one row and also responsive as well?

user_15157684 0
Viewed 198

I have this Grid and Card where I wanted to make it into 4 columns in one row. Currently, the 4th column goes in the 2nd row, like this: enter image description here

I wanted to put the 4 columns in one row.

Also, if it's on a small screen, why does it look like this? The columns are not arranged.

enter image description here

codesandbox link: https://codesandbox.io/s/4-boxes-in-one-row-0mym3j?file=/demo.js

Codes:

 <Container style={{ marginTop: "1rem", marginBottom: "1rem" }}>
      <Box sx={{ "& h1": { m: 0 } }}>
        <Grid container spacing={2} justify="flex-start">
          <Grid item xs={12} sm={6} md={4}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 1
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={4} order={{ xs: 3, sm: 2 }}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 2
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={4} order={{ xs: 2, sm: 3 }}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 3
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={4} order={{ xs: 2, sm: 3 }}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 4
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Box>
    </Container>
material-ui reactjs javascript
1 Answers

So what you have to do to your child Grid is, instead of md={4}, give it md={3} (so for medium and above sized screens all 4 will be in single row). Or if you want md to remain 4 then add another breakpoint of lg={3} for all.

The row has 12 columns so either 3 items of 4 columns each (3*4 =12) or 4 items of 3 columns each. Keep the 12 rule in mind. And on smaller screens it will wrap automatically.

Now sm={6} mean that on small sized screens only 2 items will be in single row and next would wrap. So responsive is working fine. If you want 4 on small screens as well then you have to do sm={3} as well.

So you this line will change:

<Grid item xs={12} sm={6} md={3}>  <======== md=3 OR

<Grid item xs={12} sm={6} md={4} lg={3}> <======= lg=3 added and md remain same
user_59962760
Related