Grid 중복 적용, Nested Grid 예시 코드

설명

---

Grid를 중첩하는 예시 코드입니다.

 

Grid는 width를 12개의 col으로 나누어 사용합니다.

내부적으로 다시 만든 Grid container도 이전에 할당된 col에 상관없이 자기를 기준으로 12개의 col으로 나눕니다.

 

예시 코드 및 스샷

---

 

예시 코드

<Grid container>
    <Grid item xs={1}>
      ...
    </Grid>
    <Grid item xs={11}>
      <Grid container>
        <Grid item xs={12} style={{ marginBottom: 15 }}>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            style={{ textAlign: "center" }}
          >
            ...
          </Box>
        </Grid>
        <Grid item xs={12}>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            style={{ textAlign: "left" }}
          >
            <Card variant="outlined">
              <CardContent>
                ...
              </CardContent>
            </Card>
          </Box>
        </Grid>
      </Grid>
    </Grid>
</Grid>

 

스샷

예시 스샷

grid 설명

참조

---

 

React Grid component - Material UI