CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
JS3
JS3

Reputation: 1849

With the Material-UI Grid, how can I make these into 5 columns in one row?

I have these 5 columns where I wanted them to be in one row. However, so far, this is what I got:

enter image description here

How do I make all of the columns be in one row?

I have also recreated this in my codesandbox: https://codesandbox.io/s/5-columns-in-one-row-0mym3j

Below are the codes: 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} lg={3}>
            <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} lg={3}>
            <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} lg={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} lg={3}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 4
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 5
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Box>
    </Container>

Upvotes: 0

Views: 1454

Answers (2)

Mudassar Rafi
Mudassar Rafi

Reputation: 1

  sx={{
    flexDirection: { xs: "column", md: "row" },
    flexWrap: { xs: "wrap", lg: "nowrap" },
  }}

Use this property for responsive behaviour

Upvotes: -1

3ndless_____
3ndless_____

Reputation: 159

You can use wrap="nowrap" so that the item will stay in the same row.

<Grid container wrap="nowrap" sx={{ flexDirection: { xs: "column", md: "row" }}} spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
        <Card>
          .
          .
          .
        </Card>
      </Grid>
</Grid>

Upvotes: 2

Related Questions