CSS display: grid 완벽 가이드

정의 및 사용 방법

display 속성이 grid 값으로 설정된 요소는
일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는
블록 레벨의 그리드 컨테이너를 생성합니다.

블록 레벨(block-level): 문서 흐름 맥락에서 새로운 블록(영역) 상자 수준의 레이아웃을 형성하는 요소를 말합니다. 다른 표현으로 '블록 레벨 요소'라고도 부릅니다.
일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키고, 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있습니다.

display: grid로 설정된 요소의 외부 디스플레이는 display: block으로 동작하며, 내부 디스플레이는 그리드 레이아웃 모델에 따라 콘텐츠를 배치합니다.

그리드 컨테이너(Grid Container)

'그리드 컨테이너'란 CSS에서 그리드 레이아웃을 생성할 수 있는 컨테이너를 말합니다.
이 요소는 그리드 박스(Gridbox) 레이아웃 모델을 사용해 자식 요소(그리드 아이템, Grid item)를 배치합니다.

'그리드 컨테이너'를 생성하려면 원하는 요소에 display: grid 또는 display: inline-grid를 설정합니다. 이 두 설정은 모두 그리드 컨테이너를 생성하지만 다음과 같은 차이가 있습니다.

`grid`와 `inline-grid`의 차이

display: grid는 블록 레벨의 그리드 컨테이너를 생성합니다.
display: inline-grid는 인라인 레벨의 그리드 컨테이너를 생성합니다.

인라인 레벨(inline-level): 문서 흐름 맥락에서 현재 영역 상자 안에서 텍스트처럼 줄 안에서 배치(inline)되는 콘텐츠 상자 수준의 레이아웃을 형성하는 요소를 말합니다. 다른 표현으로 '인라인 레벨 요소'라고도 부릅니다.
일반적인 문서 흐름 맥락에서 한 줄에 다른 요소와 나란히 배치됩니다.

`grid`와 `inline-grid`의 레이아웃 차이를 요약한 표입니다.
구분	외부 레이아웃	내부 레이아웃
`grid`	`block`	그리드 컨테이너(Grid Container)
`inline-grid`	`inline`	그리드 컨테이너(Grid Container)

그리드 컨테이너를 생성하는 요소는 그리드 레이아웃에 대한 다음과 같은 속성을 적용할 수 있습니다. 이 속성들은 그리드 레이아웃의 아이템 배치 및 정렬을 제어하는 데 유용합니다.

그리드 컨테이너의 레이아웃 관련 속성

display: grid 또는 display: inline-grid로 설정한 요소는 그리드 컨테이너가 됩니다. 이때, 그리드 컨테이너의 자식 요소들은 '그리드 아이템'이라고 부르며, 이들을 어떻게 배치하고 정렬할지 제어할 수 있는 다양한 속성을 그리드 컨테이너에 적용할 수 있습니다.

이 속성들은 그리드 레이아웃을 위한 것이며, 대표적으로 다음과 같은 것들이 있습니다.

그리드 컨테이너에 적용 가능한 레이아웃 관련 속성
`grid-template-columns`	그리드 열(column)의 개수와 너비를 설정합니다
`grid-template-rows`	그리드 행(row)의 개수와 높이를 설정합니다.
`grid-template-areas`	이름 기반의 그리드 영역 배치를 정의합니다.
`gap`	그리드 아이템 간격을 설정합니다.
....	이 밖에도 여러 속성들이 있습니다.

이러한 속성들은 그리드 아이템의 배치와 정렬을 설정하는 데 유용합니다.

일반적이지 않은 문서 흐름에서의 레이아웃

일반적인 문서 흐름이 아닌, 그리드 컨테이너인 요소 자체가 플렉스 아이템이나 그리드 아이템일 경우에,
해당 요소가 display: grid라 하더라도 요소 앞과 뒤의 줄바꿈 발생 여부는 다음과 같이 구현됩니다.

플렉스 아이템으로 사용되는 경우에는 플렉스 컨테이너에 설정된 레이아웃에 따라 요소의 앞과 뒤의 배치에 영향을 받습니다. 따라서, display: gird인 요소라고 하더라도 플렉스 컨테이너 설정에 따라 줄바꿈하지 않을 수 있습니다.
그리드 아이템으로 사용되는 경우에도 플렉스 아이템처럼 그리드 컨테이너에 설정된 레이아웃에 따라 요소의 앞과 뒤의 배치에 영향을 받습니다. 따라서, display: grid인 요소라고 하더라도 그리드 컨테이너 설정에 따라 줄바꿈하지 않을 수 있습니다.

예제

다음은 display: grid를 사용하여 그리드 컨테이너를 구성한 간단한 예제입니다.

HTML

<div class="grid-container">
    <div class="grid-item">child 1</div>
    <div class="grid-item">child 2</div>
    <div class="grid-item">child 3</div>
    <div class="grid-item">child 4</div>
    <div class="grid-item">child 5</div>
    <div class="grid-item">child 6</div>
</div>

CSS

.grid-container {
    display: grid; /* 그리드 컨테이너 생성 */
    grid-template-columns: repeat(3, auto); /* 그리드 열(column)의 개수와 너비를 설정 */
    border: 2px solid #333;
    padding: 10px;
    gap: 10px; /* 그리드 아이템 간격 설정 */
}
.grid-item {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
}