[Material-UI/Grid] 동일한 간격을 유지하기 위한 그리드 사용법

일반적으로 프로젝트를 만들기 전에 디자인 시안이 주어집니다. 디자인 시안이 주어질 때에는 항상 각각 영역사이의 간격이 일정합니다. 예를들어, 하이하이 라는 프로젝트가 있다고 가정했을 때, 자 우리 하이하이 프로젝트는 바깥 패딩을 30으로 하고, 영역별 간격을 20으로 하겠습니다. 이렇게 정해집니다.

 

따라서, Mui Grid 컴포넌트를 사용하는 경우에는 spacing 이라는 속성이 일정할 수 밖에 없습니다. 또한, Gid 라는 컴포넌트는 다른 Grid 컴포넌트 안에 트리구조로 사용되면 패딩과 마진이 꼬일 수 있습니다.

 

그래서 우리는 다음과 같이 규칙을 설정해야 합니다.

Container

- Grid (row)

-- Grid (col)

-- Grid (col)

 

1. Container 바로 하위에는 Row 역할을 하는 Grid 만 작성할 수 있다.

2. Row 역할을 하는 그리드를 1개 사용하면, 그 바로 하위에만 Grid를 사용할 수 있다.

 

이러한 역할을 위해 2가지의 그리드를 Styled Components 를 사용하여 초기화를 해보겠습니다.

 

다음 예제 코드를 확인하면 이해가 더 쉽습니다.

 

Container는 Mui 에서 기본으로 제공되고 있기 때문에 그걸 사용하도록 하겠습니다.

Grid (row) 은 <Grid container > 라고 설정하시면 쉽게 지정하실 수 있습니다.

Grid (col) 는 <Grid item> 이라고 지정합니다.

다음 반응형에 맞게 xs md lg ... 등의 옵션으로 각각 해상도에 맞게 12개의 영역 중에서 얼마나 차지하도록 할 것인지를 지정할 수 있습니다.

xs={12} md={4} ...

 

import { Container, Grid } from '@material-ui/core';
import React from 'react';

interface Props {
  
}

export const Home = (props: Props) => {
  return (
    <Container>
      <Grid container>
        <Grid item xs={12} md={4}>1</Grid>
        <Grid item xs={12} md={4}>2</Grid>
        <Grid item xs={12} md={4}>3</Grid>
      </Grid>
      <Grid container>
        <Grid item xs={12} md={4}>4</Grid>
        <Grid item xs={12} md={4}>5</Grid>
        <Grid item xs={12} md={4}>6</Grid>
      </Grid>
      <Grid container>
        <Grid item xs={12} md={4}>7</Grid>
        <Grid item xs={12} md={4}>8</Grid>
        <Grid item xs={12} md={4}>9</Grid>
      </Grid>
    </Container>
  );
};

 

그 다음에 <Grid item>3</Grid> 안에 내용을 집어넣는 경우에는 절대! 그리드를 사용하지 말아주세요~ 왜냐하면 세부 영역에서는 원하는 간격이 각각 다 다를 수 있기 때문입니다. 그리고 이 내부의 영역은 Grid를 사용해서 반응형으로 움직이는 영역이 없어요~