Material-ui: [Grid] Custom number of columns

[lukeggchapman]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

We would like to use a 16 column grid as we're using material-ui to build a dashboard that requires more granular layout positioning.

Now I've thought of a few ways I could do this and would be interested in your opinions.

Possible solutions:

• Add columns to the theme with a default of 12. This might not be ideal as 12 is material design, and the strict typings on grid sizes would be lost.
• Copy and paste Grid.js and make the changes I need. This could cause potential issues with my local copy falling behind.
• Re-work https://github.com/callemall/material-ui/blob/v1-beta/src/Grid/Grid.js to expose more methods allowing me to create a 16 column grid wrapper.

[oliviertassinari]

The number of column is hard coded (it's static). I can't see a way to make it dynamic. Noticed that 12 was most likely chosen by the material design team because of: PPCM(2, 3, 4, 6) = 12.

[oliviertassinari]

The limitation is coming from the static types. You might be able to get away with it without forking the component. You might be able to change the Grid.Naked.propTypes property to remove the warnings when using a value > 12, as well as injecting new styles with the theme.overrides.MuiGrid key.

[lukeggchapman]

It could be dynamic by adding it to the base theme and replacing GRID_SIZES with a method that generates the list. I was going to PR it, but didn't think you'd go for it.

Do you think it possible to expose generateGrid to help with creating the override classes?

[oliviertassinari]

@lukeggchapman My main issue is with: https://github.com/callemall/material-ui/blob/85ab0e3f6495d075d0358319c311a317bc061391/src/Grid/Grid.js#L160.
We can definitely make it work, but I don't see how we can bypass the types checking.

[lukeggchapman]

Yeah, that would become boolean | number which is not ideal for the common use case.

[oliviertassinari]

@lukeggchapman Yes. Accepting this feature will most likely mean degrading the nominal use case :/.

[oliviertassinari]

At least, boolean | number doesn't prevent us from adding another dynamic runtime checks. But people using TypeScript or Flow dev hints will no longer see the right list of supported values.

[oliviertassinari]

Actually, I'm curious to hear more people use cases. If we find enough people asking for this feature, we can consider degrading the nominal use case.

[oliviertassinari]

@lukeggchapman Oh wait, can't we create a component factory?

[lukeggchapman]

Thats what I'm looking into at the moment. I'm okay with typescript, but I'm determining the feasibility of using flow's $Values to generate the Gridsizes type.

$Values doesn't work with arrays :(

[lukeggchapman]

I can't see a way of dynamically creating the Gridsizes type in a component factory, so this approach would also suffer from losing the strict type values / dev hints.

It's looks like my best option for now is to add the class overrides then wrap and redefine Grid for my use case.

[oliviertassinari]

@lukeggchapman We have removed flow and the technical limitation that comes with it. This feature can now be implemented.

[oliviertassinari]

I'm closing for #11649.

[NonPolynomial]

I have to use a custom 8-column grid layout.
How can I achieve that with Material UI?

It would be great, if the developer could decide, which grid layout he want to use.
Something like:

<Grid container xs={8}>
// ...
</Grid>

[hmeinertrita]

Material Design has an idea of the layout grid where the number of columns changes at certain breakpoints. Is this currently possible with Material UI?

[vaibhavhrt]

I have to create component which will render something similar to a calendar, so having a Grid container of 7 columns will help a lot. For now looking to use GridList instead, but not sure if it's the best option in my case.

[oliviertassinari]

GridList won't help. We will rename it ImageList in v5.

[vaibhavhrt]

Well then time for some custom css :sweat:

[derekcannon]

For our use case, 12 columns don't provide enough granularity for the top-level layout component. We have an information-dense dashboard made purely for a desktop experience. Our UI designer designs on a 24-columns grid right now. 12 columns are find when it comes to the sub-components though.

[TimJulius]

I keep getting directed to this issue in regards to my problem, and it would definitely be great to override the default grid column count on the on a case by case basis.

We are utilizing a 12 column grid, but have smaller components that need to utilize 8 as they are aligned at 3 and 5. Unfortunately with the flow of the page we cannot simply do 3|5|4 to fill the 12 columns :(

[oliviertassinari]

As soon as #6115 is resolved, we should be able to easily implement this :).