Home » Reactjs » Material UI and Grid system

Material UI and Grid system

Posted by: admin November 29, 2017 Leave a comment

Questions:

I’m playing a little bit with Material-UI. Are there any options for creating a grid layout (like in Bootstrap)?

If not, what is the way to add this functionality?

There is a GridList component but I guess it has some different purpose.

Answers:

Material UI have implemented their own Flexbox layout.

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 (Sep 2017) it’s moved on the next / beta branch from being in alpha, so hopefully it’s a bit more stable. You can install it via:

npm install [email protected]

There is a preview with code examples.

Update: I have implemented their grid system in the project I am working on without problems.

Update 2: As commented by Suresh, the SelectField isn’t migrated yet

Update 3: The Select field is migrated as of v1.0.0-beta.9

Questions:
Answers:

From the description of material design specs:

Grid Lists are an alternative to standard list views. Grid lists are
distinct from grids used for layouts and other visual presentations.

If you are looking for a much lightweight Grid component library, I’m using React-Flexbox-Grid, the implementation of flexboxgrid.css in React.

On top of that, React-Flexbox-Grid played nicely with both material-ui, and react-toolbox (the alternative material design implementation).

Questions:
Answers:

I looked around for an answer to this and the best way I found was to use Flex and inline styling on different components.

For example, to make two paper components divide my full screen in 2 vertical components (in ration of 1:4), the following code works fine.

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

Now, with some more calculations, you can easily divide your components on a page.

Further Reading on flex

Questions:
Answers:

I hope this is not too late to give a response.

I was also looking for a simple, robust, flexible and highly customizable bootstrap like react grid system to use in my projects.

The best I know of is react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid gives you the power to customize every aspect of your grid system, while at the same time it has built in defaults which probably suits any project

Usage

npm install react-pure-grid --save

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);

Questions:
Answers:

I just use https://react-bootstrap.github.io/ for Responsive Layout and Material-ui for all the component

Questions:
Answers:

I had difficulty finding a UI framework what would implement Material Design’s standards for responsive behavior, so I’ve created two packages that implement a grid system for Material Design:

  1. A CSS framework: material-responsive-grid
  2. A set of React components that implement that framework: react-material-responsive-grid.

These packages follow the standards for responsive UI outlined by Google. 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.

Questions:
Answers:

The way I do is go to http://getbootstrap.com/customize/ and only check “grid system” to download. There are bootstrap-theme.css and bootstrap.css in downloaded files, and I only need the latter.

In this way, I can use the grid system of Bootstrap, with everything else from Material UI.

Questions:
Answers:

This is old question but google bring me to here. After a little search I found a good package: https://www.npmjs.com/package/react-grid-system

I think this is the best, easy to use and lightweight.