material ui grid

material ui를 사용해서 레이아웃을 만들어
반응형을 쉽게만듬

아래와같이 사용할 각 태그?컴포넌트?들을 임포트해야함

import {
    Grid,
    Button,
    Dialog,
    DialogContent,
    Paper,
    Hidden,
    useMediaQuery,
    useTheme,
    Container,
    spacing,
    Box,
    Border,
    makeStyles,
    MaterialUi,
} from '@material-ui/core';

레이아웃이 lg md xs개념
container, item, paper, box개념

<Grid container spacing={1} >            
  <Grid container lg={6}>
    <Grid item xs={12} md={12} lg={12} className={fixedHeightPaper} style={{backgroundColor: 'hotpink'}}>
  	<First />
    </Grid>
  </Grid>

  <Grid container lg={6} md={12} spacing={0}>

{/* Chart */}
    <Grid item xs={12} md={7} lg={7} className={fixedHeightPaper} style={{backgroundColor: 'tan'}}>

	  <First />

    </Grid>
{/* Recent Deposits */}
    <Grid item xs={12} md={5} lg={5} className={fixedHeightPaper} style={{backgroundColor: 'powderblue'}}>

     <Second />

    </Grid>
{/* Recent Orders */}

   </Grid>
</Grid>