CSS display: grid 완벽 가이드

`display: grid`

이 글에서는 display: grid로 설정된 요소가 화면에서 어떻게 디스플레이(표시)되는지 자세히 다룹니다.

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

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

그리드 컨테이너(Grid Container)

그리드 컨테이너란 CSS에서 그리드 레이아웃을 생성할 수 있는 컨테이너를 말합니다. 이 용어는 그리드 레이아웃(Grid Layout )'라는 이름으로도 불리며, 그리드 레이아웃을 구현하는 모델을 나타냅니다. 그리드 컨테이너를 생성하는 방법은 원하는 요소에 display: grid 또는 display: inline-grid를 설정하는 것입니다. 이 두 설정은 모두 그리드 컨테이너를 생성하지만 다음과 같은 차이가 있습니다.

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

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

그리드 컨테이너 전용 속성

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

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

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

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

예제

다음은 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;
}

브라우저 호환성

display 속성의 grid 값에 대한 브라우저 호환성
속성과 값	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`display: grid`	57	16	52	10.1

명세서

display 속성의 grid 값에 대한 명세서 사양
명세서 사양
`display: grid`	CSS Display Module Level 3 #valdef-display-grid