Mimic bootstrap grid using Material-UI Grid list

Question

I'm new to Material-ui and I'm using ReactJS. I have this jsfiddle but using Bootstrap. I would like to know how the 2 column panel with header should be coded using React Material-UI.

I want to achieve this layout - https://i.stack.imgur.com/lMD42.jpg

Here is bootstrap snippet:

<div class="row">
  <div class="col-xs-12">Header</div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="row">
            <!-- Left side -->
            <div class="col-xs-3">
                <div class="row">
                    <!-- 1st column -->
                    <div class="col-xs-12">Menu 1</div>
                    <div class="col-xs-12">Menu 2</div>
                    <div class="col-xs-12">Menu 3</div>
                    <div class="col-xs-12">Menu 4</div>
                    <div class="col-xs-12">Menu 5</div>
                    <div class="col-xs-12">Menu 6</div>
                </div>
            </div>

            <!-- Right side -->
            <div class="col-xs-9">
                <div class="row">
                    <!-- 3rd column -->
                    <div class="col-xs-12">Dashboard</div>
                    <!-- 4th column -->
                    <div class="col-xs-12">Device Statistics</div>
                    <!-- colspan 2 -->
                    <div class="col-xs-12">Device Health</div>
                </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/wLob4p03/1/

score 1 · Accepted Answer · answered Feb 20 '17 at 07:25

GridList in material-ui is not about grid layout. Take a look at material design guidelines:

Grid lists are an alternative to standard list views.

You would need to implement grid layout on your own or use some ready libraries. There are a lot of them, which are usually based on Bootstrap grid, or very alike:

bootstrap-grid-react
ReactGrid
react-virtualized (for some more advanced needs)

You could probably find much more than that, just find the one that suits your needs best. Personally, I create my own Grid components to have a full control over that.

Oh ok. Thanks a lot for explaining it. That helps a lot! When I was reading the docs earlier, I was like, where is it, hehehe. Thanks again. — devwannabe, Feb 20 '17 at 08:14

Fabian Bosler · Answer 2 · 2017-04-25T20:42:43.537

I think the answer should be updated, as Material UI have implemented their own Flexbox layout very much like Bootstrap (https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui).

Note: this is not Material-UI Grid list though.

It appears they initially wanted to keep themselves as purely a 'components' library. But one of the core developers decided it was too important not to have their own. It has now been merged into the core code and it is on track to be released with v1.0.0.

Currently (April 2017) it's still on the next / alpha branch. You can install it via:

npm install material-ui@next

Credit for this answer to: icc97 - Material UI and Grid system

Mimic bootstrap grid using Material-UI Grid list

2 Answers2