CSS display: inline-grid 완벽 가이드

정의 및 사용 방법

display 속성이 inline-grid 값으로 설정된 요소는
외부 레이아웃에서는 인라인(inline) 요소처럼 배치되지만, 내부에서는 그리드 레이아웃이 적용되는 그리드 컨테이너를 생성합니다.

주요 특징

외부 레이아웃은 일반적인 문서 흐름(static/normal flow)에서 인라인(inline) 요소처럼 한 줄에 다른 요소와 나란히 배치됩니다.
내부 레이아웃은 블록(block) 요소처럼 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있습니다.
너비와 높이를 지정하지 않으면, 기본적으로 가로 너비는 콘텐츠의 크기만큼 차지합니다.
다만, 해당 요소소가 플렉스 아이템이나 그리드 아이템으로 사용되는 경우에는 컨테이너의 레이아웃 설정에 따라 달라질 수 있습니다.
해당 요소의 내부는 그리드 레이아웃 모델에 따라 콘텐츠를 배치합니다.

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

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

두 값 모두 내부 레이아웃에서는 그리드 컨테이너(Grid Container)를 생성하며, 그리드 레이아웃 모델에 따라 콘텐츠를 배치한다는 공통점이 있습니다.

그리드 컨테이너(Grid Container)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

또한, position: absolute나 position: fixed와 같이 요소가 일반적인 문서 흐름(normal flow)에서 제거되는 경우에는 요소의 앞뒤 줄 배치 여부와 관계없이, 주변 요소의 흐름에 영향을 받지 않고 독립적으로 배치됩니다.

예제

다음은 일반적인 문서 흐름(static/normal flow)에서 display: inline-grid를 사용하여 그리드 컨테이너를 구성한 간단한 예제입니다.

HTML

<div class="block-container">
    <span>일반 텍스트 앞</span>
    <div class="inline-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>
    <span>일반 텍스트 뒤</span>
</div>

CSS

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