Material UI and Grid system

Question

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.

Mitchelmitchell

Dont think it has any components to create responsive grids. – Rok

the answer is here github.com/callemall/material-ui/issues/190 – Mitchelmitchell

Answer 1

Material UI have implemented their own Flexbox layout via the Grid component.

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 was released with v1.0.0.

You can install it via:

npm install @material-ui/core

It is now in the official documentation with code examples.

Prober

I see you posted the answer I was just going to add! lol. just responded to your comment on the current leading answer. – Bridesmaid

Just installed and using the alpha branch of Material UI now. Can confirm that the Layout system works well. – Condolence

The grid system works well but, There are some components which has not been implemented yet, like Select Field. I am stuck on how to use such fields. Can you help me through this? – Inhalator

I agree with @SureshMainali as I am facing the same issues too. Most of the components have missing props and even regarding the custom theme implementation too – Scrope

@SaiRam I wouldn't say most, but indeed the Select is missing, I've just replaced it with radio buttons for now, but I'm sure it won't be long before the select is ported from trunk. – Prober

@SureshMainal The SelectField is in progress to be migrated, see github.com/callemall/material-ui/issues/5716 and the connected issues – Prober

I can't wait to see when CSS Grid hits the deck and all these UI frameworks gets rewritten, apparently CSS grid is here to stay. I am almost sure these frameworks will suffer another rewrite in order to benefit from the flexibility that CSS grid has to offer. – Quest

Currently no Types ->TypeScript need. on it yet. – Bushwa

I am using 0.18.7 version of material-ui in my react project , now i am not able to use Grid in this ? do i have to install some another dependency ? do you have any working example or github repo for the same ? – Winnow

@PardeepJain I just took the code examples from the preview with code examples. You can literally copy and paste them into a React project setup with npm install material-ui@next and they should work. There isn't another dependency. I started with the tutorial from Meteor React tutorial and then integrated the Material UI framework into that – Prober

@PardeepJain also beware as it's only just moved to beta so it changes rapidly and you need to keep your library up to date with changes. So I'd recommend that you update to the latest beta version before going much further. – Prober

@SureshMainali The select field has been migrated in v1.0.0-beta.9 – Prober

Answer 2

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).

Deferral

React-Flexbox-Grid is poorly implemented at the time of this post and requires far to many external dependencies to function properly. Plus, @Roylee is the developer of it... so his opinion is a bit biased anyway ;)... – Bridesmaid

Also, react-flexbox-grid depends on flexboxgrid, which does not use the same responsive breakpoints recommended in Material Design. See: material.io/guidelines/layout/… – Cowes

@Bridesmaid would this be your competing version? Perhaps you're a bit biased too :) – Prober

@Prober yes and no. Didn't really intend to "compete" it was more of a stop gap for the app I was building. I made that after being disappointed with both... it really doesn't matter anymore though because the guys over at CallEmAll included a grid system in the latest release of Material-UI. I haven't tried it yet personally though. github.com/callemall/material-ui/pull/5808 – Bridesmaid

@Bridesmaid yours looked pretty good. I've been testing out the new Material-UI grid and it's working well so far. – Prober

Answer 3

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

Specter

I agree, using flex css properties delivered the simple formatting I needed. – Spirituous

Answer 4

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>
);

Anticipative

Answer 5

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.

Eloiseloisa

Answer 6

Below is made by purely MUI Grid system,

With the code below,

// MuiGrid.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

↓ CodeSandbox ↓

Meanie

Nice example demo! – Gaius

The demo is a basic example. Often large projects have nested Grids and spacing does not work as desired. – Ineffaceable

Answer 7

Here is example of grid system with material-ui which is similar to bootstrap:

<Grid container>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
 </Grid>

Mckeehan