개발하는데 다 이유가 있겠지

웹페이지의 레이아웃을 쉽고 간단하게 사용할 수 있도록 구현된 <Container>와 <Grid>

 

Container 컴포넌트

---

<Container> 컴포넌트는 컨텐츠(내용)을 좌우에 적당한 간격을 두고 화면 중앙에 위치시킬때 사용한다.

1. 최대 너비만을 제한하는 fluid 모드

2. 항상 동일한 너비를 강제하는 fixed 모드

import { Container, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  container: {
    background: theme.palette.success.main,
  },
}));

export default () => {
  const classes = useStyles();

  return (
    <>
      <Container maxWidth="sm" className={classes.container}>
        <Typography variant="h6" color="primary">
          Fluid
        </Typography>
      </Container>

      <br />

      <Container fixed maxWidth="xs" className={classes.container}>
        <Typography variant="h6" color="secondary">
          Fixed
        </Typography>
      </Container>
    </>
  );
};

 

Grid 컴포넌트

---

<Grid> 컴포넌트는 <Container> 컴포넌트처럼 레이아웃을 잡을 때 필수적으로 사용되지는 않지만,

 컨텐츠를 반응형 격자로 배치시켜야 하는 경우 유용하게 사용된다.

Material UI는 기본적으로 12열 격자(grid) 시스템을 가지고 있으며, 각 브레이크포인트(breackpoint) 별로 각 셀이 몇 열을 차지할 것인지 명시할 수 있다.

import { Grid, Box } from "@material-ui/core";

export default () => (
  <>
    <Grid container spacing={1}>
      <Grid item xs={12}>
        <Box bgcolor="info.main" color="info.contrastText" p={2}>
          1
        </Box>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Box bgcolor="info.main" color="info.contrastText" p={2}>
          2
        </Box>
      </Grid>
      <Grid item xs={12} sm={6}>
        <Box bgcolor="info.main" color="info.contrastText" p={2}>
          3
        </Box>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Box bgcolor="info.main" color="info.contrastText" p={2}>
          4
        </Box>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Box bgcolor="info.main" color="info.contrastText" p={2}>
          5
        </Box>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Box bgcolor="info.main" color="info.contrastText" p={2}>
          6
        </Box>
      </Grid>
      <Grid item xs={6} sm={3}>
        <Box bgcolor="info.main" color="info.contrastText" p={2}>
          7
        </Box>
      </Grid>
    </Grid>
  </>
);

 

 

[출처]
https://www.daleseo.com/?tag=MaterialUI