grid item container material ui code example

Example 1: two column grid layout material ui

import Grid from '@material-ui/core/Grid'
<Grid container>
     <Grid item xs={6}> 
         ... 
     </Grid>
     <Grid item xs={6}>
         ...
     </Grid>
</Grid>

Example 2: grid breakpoints material ui

Grid breakpoints Material-UI:
xs, extra-small: 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px
xl, extra-large: 1920px

The grid is based on a 12 column system meaning the screen at any
given point has 12 columns of available space. A grid item with sm=6 
will take up half the screen (6 of 12 columns) at screen size small
and larger (width = 600px+).