Material-ui: [Docs] Add responsive grid recommendations

[boustanihani]

Could you please suggest some responsive grids for the layout in the official docs?

Please also check:

• https://github.com/callemall/material-ui/issues/190
• https://github.com/callemall/material-ui/issues/209
• https://github.com/callemall/material-ui/issues/1086
• https://github.com/callemall/material-ui/issues/1109
• #1460

[oliviertassinari]

Yeah, I think that it would be great to add a section for this on the documentation.

[boustanihani]

I'm glad you agree :bowtie:

[roylee0704]

shameless plug: react-flexbox-grid. :)

[xdvarpunen]

@roylee0704 installation almost impossible, had to read all issues and still didn't get it working...

[Sabst]

_Note: I'm using meteor 1.3.beta8 so others may have a different experience._
I confirm that installation of react-flexbox-grid was very painful, even after using a local version with the latests fixes, and I finally gave-up (../style, flexboxgrid import errors...).

I am currently having a nicer experience with https://flex-grid.com that has the double advantage of

• offering a familiar syntax to those coming from Bootstrap
• and working easily as expected (even with a meteor package for those using Meteor)

More validation is required though...

[xdvarpunen]

Susy worked nicely with material-ui: http://susy.oddbird.net/. @Sabst flex-grid was nice experience c:

Could you choose one which has pretty much no dependency except CSS itself?

[hoschi]

I just read the spec for grid in material design: https://www.google.com/design/spec/layout/responsive-ui.html
This wants a (4,8,12) column grid with variable gutter sizes.

I don't get the point of suggesting "bootstrap like, always 12 column, fixed gutter size" grid system (like flexbox grid) when using MUI framework and so material design. Do I get something obviously wrong here? Because I can't find a standalone CSS grid framework which fits into the material design spec. material design lite has such a grid, but bundles also the components stuff.

[beatwade]

how about using bootstrap grid system until some stable marterial grid system come out?

[oliviertassinari]

@beatwade, I think that we have made some progress regarding implementing a layout component on the next branch https://github.com/callemall/material-ui/pull/5267. I have found two interesting implementations out there:

• flexboxgrid
• Angular Material Layout

[oliviertassinari]

We have added a <Layout /> component on the next branch #5808.
I don't think that we should add any recommendation until we release that new branch.
I'm closing the issue.