Grid 속성으로 공간 나누기

<Grid container justify="flex-end" alignItems="center" direction="row">
	<Grid sm item>
    	<Typography variant="h2" align="center">
    		Brtinging West Cost Technology
    		<br />
    		to the Midwest
    	</Typography>
    	<Grid container>
    		<Grid item>
    			<Button variant="contained">Free Estimate</Button>
    		</Grid>
    		<Grid item>
    			<Button variant="outlined">Learn More</Button>
    			<ButtonArrow width={15} height={15} fill={"red"} />
    		</Grid>
    	</Grid>
    </Grid>
    <Grid sm item>
    	<Lottie options={defaultOptions} height={"100%"} width={"100%"} />
    </Grid>
</Grid>

Grid Container 안의 Grid를 보면 각각 sm을 넣었다.

이러한 경우 sm보다 size가 큰 경우 두 Grid가 같이 공간을 반반 나눠서 가진다는 것을 의미한다.

 

참고:

material-ui.com/components/grid/#grid