3

I'm looking for a way to implement a responsive grid system to develop material design apps using react and material-ui.
While React-Bootstrap have this, I haven't found something similar with Material-UI. GridList is nice, but not quite the same. Is there any solution for that?

Gershon Papi
  • 5,008
  • 3
  • 24
  • 50
  • I believe it's still on their roadmap https://github.com/callemall/material-ui/issues/3614. I'm looking for alternatives and other stuff currently I'm making due with uikit grid system. – Anton May 19 '16 at 14:43
  • what is the reason to not use bootstraps solution? if you are using webpack or and build tool that support tree-shaking you dont include unrelated stuff in your bundle. Just the grid. – Avraam Mavridis May 19 '16 at 15:34
  • @AvraamMavridis isn't that an ugly solution? Who can promise me that these 2 frameworks are compatible with each other? – Gershon Papi May 19 '16 at 15:40
  • 1
    @GershonPapi As far I saw material-ui is using inline-styling so probably you will not have any issue. But, yeah, I agree is an ugly solution but then again, it seems to me the only solution if you dont want to build your own grid system. – Avraam Mavridis May 19 '16 at 15:51
  • @AvraamMavridis k, thanks. I've also though about switching to react-toolbox or react-mdl (another material design react frameworks) which does have grid systems, any opinions on those frameworks? – Gershon Papi May 19 '16 at 15:54
  • @GershonPapi react-mdl is good, but not so "material" as material-ui is. – Avraam Mavridis May 19 '16 at 16:36

4 Answers4

2

Rather using inline styling for material-ui i am using bootstrap with Material-UI . it works good and simple. Here is an example.

<div className="Container">
<button className="btn btn-primary"> Action</button>
<div className="row">

     <div className="col-sm-4">
           <ReactAutoForm collection={DoctorCategories} type="insert" debug={true} />
      </div>

      <div className="col-sm-8">
            <table><TableHeader><TableRow>
                                        <TableHeaderColumn>Name</TableHeaderColumn>
                                        <TableHeaderColumn>Description</TableHeaderColumn>
                                        <TableHeaderColumn>Edit</TableHeaderColumn>
                                    </TableRow>
      </TableHeader>
      <TableBody>
</TableBody>
 </TableBody>
                            </table>
                            </div>

</div>
</div>
Umar Abbas
  • 4,041
  • 2
  • 23
  • 21
2

It seems that react-inline-grid (http://broucz.github.io/react-inline-grid/) could be a good solution for this issue.

Concepts behind this lib are really close to ones behind Bootstrap grid system, and it use inline-styling.

Lionel
  • 21
  • 3
2

I've created two packages that implement a grid system for Material Design. The first, material-responsive-grid is a CSS framework and the second, react-material-responsive-grid, is a set of React components that implement this framework.

These packages follow the standards for responsive UI outlined by Google, so you won't have to decide on the varying breakpoints that have been implemented by every other UI framework. All viewport sizes specified in their standards are supported with consideration for the proper gutters, recommended number of columns, and even the behavior of a layout that exceeds 1600 dp. It should behave as recommended for every device in the Device Metrics guide.

Each package is available on github and includes an example React app.

Let me know if you have any questions.

Ken Gregory
  • 7,180
  • 1
  • 39
  • 43
0

Now Material-UI has their own Flexbox Layout. It is in alpha branch You can use it by Material-UI latest build 

npm install material-ui@next

For more detailed documentation and examples you can visit this link https://material-ui-1dab0.firebaseapp.com/layout/responsive-uie-ui

Rohit Luthra
  • 1,256
  • 17
  • 27