Search code examples
reactjsmaterial-uigrid

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:

|----|----|----|----|----|----|----|
Solution

  • 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/