1. Auto-layout

: 자동으로 균형잡힌 레이아웃을 만들 수 있음. 

<Grid container spacing={3}>
    <Grid item xs>
        <Item>xs</Item>
    </Grid>
    <Grid item xs ={6}>
        <Item>xs=6</Item>
    </Grid>
    <Grid item xs>
        <Item>xs</Item>
    </Grid>
</Grid>

아이템들이 어떤 비율로 공간을 차지할 지 결정한다. 

한 아이템의 너비를 설정하면 다른 아이템들(여기서는 마지막 아이템)은 그거에 맞춰서 자동적으로 크기가 재조정된다. 

<Grid container spacing={3}>
    <Grid item xs="auto">
        <Item>variable width content</Item>
    </Grid>
    <Grid item xs={6}>
        <Item>xs=6</Item>
    </Grid>
    <Grid item xs>
        <Item>xs</Item>
    </Grid>
</Grid>

이러면 xs=오토(콘텐츠의 크기에 따라 너비가 결정된다), xs=6(그리드 컨테이너의 절반을 차지), 
마지막 아이템은 첫 번째와 두 번째 아이템이 각각의 크기만큼 공간을 차지하고 남는 모든 공간을 차지한다. 

2. Nested Grid

:중첩 그리드. 하나의 컴포넌트는 컨테이너이면서 아이템일 수 있다. 

<Grid container spacing={1}>
    <Grid container item spacing = {3}>
        <FormRow />
    </Grid>
    <Grid container item spacing={3}>
        <FormRow/>
    </Grid>
    <Grid container item spacing={3}>
        <FormRow/>
    </Grid>
</Grid>

<Grid spacing={1} container item xs={12}> </Grid>

근데 이런 식으로 두 가지 스페이싱을 동시에 하는 것은 불가능함. 

3. 컬럼 값 임의로 지정하기

:그리드 컬럼의 기본값은 12이지만 column prop을 사용해서 너비를 총 몇 칸으로 나눌지 다시 설정할 수 있다. 

<Grid container spacing = {2} columns = {16}>
    <Grid item xs={8}>
        <Item>xs=8</Item>
    </Grid>
    <Grid item xs={8}>
        <Item>xs=8</Item>
    </Grid>
</Grid>

그리드의 컬럼을 16으로 지정했다.

#

Limitations

1. Negative Margin

item 간의 간격을 정하는 것은 negative margin과 함께 구현이 되는데, 이게 예상치 못한 결과를 낳을 수도 있다.

레이아웃이나 배경 색상 문제를 예방하기 위해서 부모 컨테이너에 display: flex를 적용하는 것이 좋다.

(참고)

Negative Margin과 Positive Margin

그리드 아이템 간의 간격을 설정할 때, Material-UI는 다음과 같이 동작합니다:

1. Negative Margin: 부모 Grid 컨테이너에 음수 마진을 적용하여 그리드 아이템들이 주어진 간격을 가지도록 합니다. 예를 들어, spacing={3}이라면 부모 요소는 -12px(-4 * 3) 만큼의 마진을 가지게 됩니다(기본적으로 spacing 단위는 8px입니다).
2. Positive Padding: 각 Grid 아이템에는 동일한 양의 양수 패딩이 적용됩니다. 이는 아이템들이 실제로 간격을 가지도록 합니다.

Negative Margin 방식은 몇 가지 문제를 일으킬 수 있습니다:

• 배경 색상 문제: 부모 Grid 컨테이너에 음수 마진이 적용되면, 배경 색상을 설정할 때 예상치 못한 결과가 발생할 수 있습니다. 예를 들어, Grid 컨테이너에 배경 색상을 설정하면, 음수 마진으로 인해 배경 색상이 부모 컨테이너 밖으로 확장되어 보일 수 있습니다.
• 레이아웃 문제: 음수 마진과 양수 패딩의 조합으로 인해 레이아웃이 의도한 대로 보이지 않을 수 있습니다. 특히, 외부 컨테이너나 다른 요소들과의 간격을 맞출 때 어려움이 있을 수 있습니다.

해결 방법

이러한 문제를 해결하기 위해 부모 요소에 display: flex를 적용하는 방법을 사용할 수 있습니다. display: flex는 그리드 아이템들이 부모 컨테이너의 크기를 벗어나지 않도록 하고, 예상치 못한 레이아웃 문제를 방지합니다.

2. white-space: nowrap

white-space: nowrap  === 줄 바꿈 안하겠다는 것이다.
flex item의 초기 세팅 값은 min-width: auto 이다. 이렇게 하면 white-space: nowrap(줄바꿈안하는 기능)을 쓸 때 아이템이 컨테이너 밖까지 나가는 현상이 생길 수 있다.  
이걸 방지하기 위해서 min-width를 0으로 설정할 수 있다.

<Grid item xs zeroMinWidth>
    <Typography noWrap/>

이렇게 하면 플렉스 아이템의 최소 너비가 0이 되어서 텍스트가 줄 바꿈 없이 한 줄로 표시되더라도 컨테이너의 전체 너비를 벗어나지 않는다. 

3. direction: column | column-reverse

xs, sm, md, lg, xl props는

direction = "column" 이나 direction = "column-reverse" 컨테이너 안에서는

너비가 아니라 높이에 영향을 미치게 된다.

--> 열(column)로 정렬되어 있는 컨테이너에서는 이 속성들을 사용하지 않는 게 좋다.