CODEWITHSUNDEEP
reactjsmaterial-uigrid
assembler
assembler

Reputation: 3300

React Material UI how to make a 7 columns grid

According to https://material-ui.com/components/grid/ I can have a grid of 12, 6, 4, 3, 2 equal columns with the same width, or only one colum. I need to have a grid with 7 columns with the same width... Is there any way to achieve this?

I mean this:

|--|--|--|--|--|--|--|--|--|--|--|--|
|-----|-----|-----|-----|-----|-----|
|--------|--------|--------|--------|
|-----------|-----------|-----------|
|-----------------|-----------------|
|-----------------------------------|

I need this:

|----|----|----|----|----|----|----|

Upvotes: 2

Views: 1932

Answers (2)

Sufiyan Ansari
Sufiyan Ansari

Reputation: 1946

I think you can achieve the 7 columns by using the "/" operator. Example given below

<Box sx={{ flexGrow: 1 }}>
  <Grid container spacing={2}>
    <Grid item xs={12/7}>
      <Item>Sunday</Item>
    </Grid>
    <Grid item xs={12/7}>
      <Item>Monday</Item>
    </Grid>
    <Grid item xs={12/7}>
      <Item>Tuesday</Item>
    </Grid>
    <Grid item xs={12/7}>
      <Item>Wednesday</Item>
    </Grid>
    <Grid item xs={12/7}>
      <Item>Thursday</Item>
    </Grid>
    <Grid item xs={12/7}>
      <Item>Friday</Item>
    </Grid>
    <Grid item xs={12/7}>
      <Item>Saturday</Item>
    </Grid>
    <Grid item xs={12/7}>
      <Item>Extra</Item>
    </Grid>
  </Grid>
</Box>

Upvotes: 2

Tromp Hakvoort
Tromp Hakvoort

Reputation: 42

I don't think you can make a seven column grid with Material UI. You could make your own grid with CSS Grid, this way you can make as many columns or rows you wish. Here's an awesome guid on CSS Grids https://css-tricks.com/snippets/css/complete-guide-grid/

Upvotes: 1

Related Questions