CSS 그리드 간격(Grid Gap) 완벽 가이드: 행과 열 사이 여백 설정하기

CSS 그리드 간격이란?

그리드 레이아웃에서 행(row)과 열(column) 사이의 공간을 그리드 간격(Grid Gap)이라고 합니다. 아래 그림처럼 각 그리드 항목들 사이에 존재하는 여백을 의미하며, 이를 활용하면 요소들을 깔끔하게 배치할 수 있습니다.

그리드 간격 관련 주요 속성

1. row-gap — 행 사이 간격

row-gap 속성은 그리드 행과 행 사이의 세로 간격을 지정합니다.

.container {
  display: grid;
  row-gap: 20px;
}

2. column-gap — 열 사이 간격

column-gap 속성은 그리드 열과 열 사이의 가로 간격을 지정합니다.

.container {
  display: grid;
  column-gap: 30px;
}

3. gap — 행과 열 간격을 한 번에 설정

gap 속성은 row-gap과 column-gap을 한 번에 지정할 수 있는 축약형(shorthand) 속성입니다.

.container {
  display: grid;
  gap: 20px 30px; /* 첫 번째 값: 행 간격, 두 번째 값: 열 간격 */
}

.container2 {
  display: grid;
  gap: 25px; /* 하나의 값만 쓰면 행과 열 모두 동일하게 적용 */
}

참고 사항

• 예전에는 grid-row-gap, grid-column-gap, grid-gap이라는 이름으로 사용되었으나, 현재는 플렉스박스와의 통일성을 위해 row-gap, column-gap, gap 사용이 권장됩니다.
• 간격은 px, %, rem 등 다양한 단위로 지정할 수 있으며, 음수 값은 허용되지 않습니다.
• 그리드 간격은 그리드 트랙(track) 크기 계산에 포함되지 않고, 트랙 사이에만 추가 공간을 만듭니다.

마무리

그리드 간격 속성을 잘 활용하면 복잡한 마진(margin) 처리 없이도 레이아웃 요소 사이의 여백을 손쉽게 조절할 수 있습니다. 특히 반응형 웹 디자인에서 카드 목록이나 갤러리 레이아웃을 구성할 때 매우 유용하므로 꼭 익혀두시길 바랍니다.