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

User · Answer

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

User · Answer

Here is example of grid system with material-ui which is similar to bootstrap    lt Grid container gt       lt Grid item xs  12  sm  4  md  4  lg  4  gt       lt  Grid gt       lt Grid item xs  12  sm  4  md  4  lg  4  gt       lt  Grid gt    lt  Grid gt

User · Answer

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

User · Answer

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   gt       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        lt div className  classes root  gt         lt Grid container spacing  0  gt           lt Grid item xs  12  gt             lt Paper className  classes paper  gt xs 12 lt  Paper gt           lt  Grid gt           lt Grid item xs  12  sm  6  gt             lt Paper className  classes paper  gt xs 12 sm 6 lt  Paper gt           lt  Grid gt           lt Grid item xs  12  sm  6  gt             lt Paper className  classes paper  gt xs 12 sm 6 lt  Paper gt           lt  Grid gt           lt Grid item xs  6  sm  3  gt             lt Paper className  classes paper  gt xs 6 sm 3 lt  Paper gt           lt  Grid gt           lt Grid item xs  6  sm  3  gt             lt Paper className  classes paper  gt xs 6 sm 3 lt  Paper gt           lt  Grid gt           lt Grid item xs  6  sm  3  gt             lt Paper className  classes paper  gt xs 6 sm 3 lt  Paper gt           lt  Grid gt           lt Grid item xs  6  sm  3  gt             lt Paper className  classes paper  gt xs 6 sm 3 lt  Paper gt           lt  Grid gt         lt  Grid gt       lt  div gt            darr  CodeSandbox  darr

User · Answer

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          lt div gt           lt div style  styles div  gt             lt Paper zDepth  3  style  styles paperLeft  gt               lt h4 gt First Vertical component lt  h4 gt             lt  Paper gt             lt Paper zDepth  3  style  styles paperRight  gt                 lt h4 gt Second Vertical component lt  h4 gt             lt  Paper gt           lt  div gt         lt  div gt                Now  with some more calculations  you can easily divide your components on a page   Further Reading on flex

User · Answer

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

User · Answer

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        gt           lt Container gt           lt Row gt             lt Col xs  6  md  4  lg  3  gt Hello  world  lt  Col gt           lt  Row gt           lt Row gt               lt Col xsOffset  5  xs  7  gt Welcome  lt  Col gt           lt  Row gt         lt  Container gt

[reactjs] Material UI and Grid system

Examples related to reactjs

Examples related to material-design

Examples related to material-ui

Examples related to grid-system