CSS / Tutorial / Grid / grid-column-gap, grid-row-gap, grid-gap

CSS Grid의 행 사이 간격은 row-gap, 열 사이 간격은 column-gap으로 정하고, gap은 두 값을 한 번에 지정합니다. gap: 16px 24px의 첫 값은 행, 둘째 값은 열 간격입니다. 제목의 grid-row-gap·grid-column-gap·grid-gap은 이전 이름이며, 새 코드는 현재 이름인 row-gap·column-gap·gap을 사용하는 편이 명확합니다.

기존 이름과 현재 속성의 대응

기존 이름은 브라우저에서 호환용 별칭으로 처리됩니다. 이름에서 grid가 빠진 현재 속성은 Flex 등의 배치에서도 사용되지만, 이 글은 기본 가로 쓰기의 Grid를 기준으로 설명합니다.

.grid {
  row-gap: 16px;
  column-gap: 24px;
}

/* 위의 두 선언과 같은 간격 */
.grid {
  gap: 16px 24px;
}

/* 행과 열 모두 20px */
.grid {
  gap: 20px;
}

각 예시는 선택해서 쓰는 대안입니다. 같은 선택자에 세 규칙을 모두 붙여 넣으면 뒤쪽 gap: 20px가 앞의 간격을 덮어씁니다. 단위가 있는 길이값은 16px처럼 쓰고, 간격을 없앨 때는 0을 사용할 수 있습니다. 음숫값으로 아이템을 겹치는 용도의 속성은 아닙니다.

전체 예제: 행과 열 간격을 따로 비교

다음 코드를 grid-gap.html로 저장해 브라우저에서 엽니다. 외부 파일이나 JavaScript는 필요하지 않습니다. 네 격자는 같은 여섯 아이템을 사용하고 간격 설정만 다르게 했습니다. 노란색으로 보이는 부분은 부모의 배경입니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grid 행과 열 간격 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; } h2 { margin: 16px 0 4px; font-size: 18px; }
    .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 420px; padding: 12px; border: 1px solid #9d8455; background: #fff2cf; }
    .item { min-width: 0; min-height: 40px; display: grid; place-items: center;
      background: #176f80; color: white; overflow-wrap: anywhere; }
    .row-only { row-gap: 16px; }
    .column-only { column-gap: 24px; }
    .both { gap: 16px 24px; }
  </style>
</head>
<body>
<h1>Grid 간격 비교</h1>
<h2>간격 없음</h2>
<div class="grid none"><div class="item">가</div><div class="item">나</div><div class="item">다</div><div class="item">라</div><div class="item">마</div><div class="item">바</div></div>
<h2>행 16px</h2>
<div class="grid row-only"><div class="item">가</div><div class="item">나</div><div class="item">다</div><div class="item">라</div><div class="item">마</div><div class="item">바</div></div>
<h2>열 24px</h2>
<div class="grid column-only"><div class="item">가</div><div class="item">나</div><div class="item">다</div><div class="item">라</div><div class="item">마</div><div class="item">바</div></div>
<h2>행 16px · 열 24px</h2>
<div class="grid both"><div class="item">가</div><div class="item">나</div><div class="item">다</div><div class="item">라</div><div class="item">마</div><div class="item">바</div></div>
</body>
</html>

첫 격자는 아이템들이 서로 붙고, 둘째는 위아래 행 사이만 16px 떨어집니다. 셋째는 열 사이만 24px 떨어지고, 넷째는 두 방향의 간격이 모두 생깁니다. 네 격자의 바깥쪽에는 공통으로 padding: 12px를 넣었으므로 간격을 지정하지 않은 첫 격자도 테두리와 아이템 사이에 여백이 있습니다.

아이템의 너비를 고정하지 않고 세 열이 남은 공간을 같은 비율로 나누게 했습니다. 같은 컨테이너 너비에서 column-gap을 추가하면 간격이 차지하는 공간만큼 각 열이 좁아집니다. row-gap은 이 예제의 세로 전체 높이를 늘리지만 같은 행의 아이템 높이를 직접 바꾸는 속성은 아닙니다.

gap·padding·margin의 차이와 너비 계산

gap은 인접한 트랙 사이에 생기는 빈 공간입니다. 컨테이너 바깥 테두리와 첫·마지막 아이템 사이의 안쪽 여백은 padding으로 정합니다. 아이템의 margin은 해당 아이템에 붙는 바깥 여백이며 gap과 함께 있으면 눈에 보이는 거리가 더 커질 수 있습니다. 배경색이나 테두리가 gap 자체에 자동으로 생기는 것도 아닙니다.

열이 세 개라면 열 사이 간격은 두 개입니다. 전체 예제의 컨테이너가 최대 너비 420px일 때 테두리 2px와 좌우 padding 24px를 제외한 내용 너비는 394px입니다. 여기에 column-gap 두 개가 48px를 차지하므로 세 열이 나누는 공간은 346px입니다. 실제 화면이 더 좁으면 그 화면에서 사용할 수 있는 너비로 다시 계산됩니다.

반대로 각 열을 33.333%로 지정해 합계가 100%인 상태에서 gap을 더하면 간격 공간만큼 넘칠 수 있습니다. 같은 비율 열이 목적이라면 예제의 repeat(3, minmax(0, 1fr))처럼 간격을 뺀 공간을 나누는 구성이 편리합니다. 열이 하나뿐이면 그 열의 양옆에 column-gap이 생기지 않고, 행이 하나뿐이면 row-gap도 보이지 않습니다.

값을 바꾸는 실습과 예상보다 넓은 간격 점검

전체 예제의 .both 규칙만 gap: 20px로 바꾸면 두 방향 모두 20px가 됩니다. 그 뒤 원래의 gap: 16px 24px로 되돌려 비교합니다. 같은 값의 기존 grid-gap으로 바꿨을 때도 이 Grid 예제의 간격은 같게 표시됩니다. 호환용 별칭과 현재 문법의 관계는 MDN gap 문서에서 확인할 수 있습니다.

간격이 계산된 gap보다 넓다면 아이템 margin과 justify-content·align-content를 확인하세요. 예를 들어 열을 60px로 고정한 뒤 justify-content: space-between을 쓰면 남는 공간도 열 사이에 분배되어 실제 거리가 지정한 column-gap보다 커질 수 있습니다. 값이 틀린 것이 아니라 간격 외의 공간 배분이 더해진 결과일 수 있습니다.

/* 전체 예제의 style 끝에 추가하여 .both만 비교 */
.both {
  grid-template-columns: repeat(3, 60px);
  justify-content: space-between;
}

비교를 마치면 위 규칙을 제거합니다. 설정이 적용되지 않으면 부모가 Grid 컨테이너인지, 행·열이 두 개 이상인지, 뒤의 gap 단축 선언이 개별 속성을 초기화하는지 순서대로 확인합니다. gap 다음에 column-gap을 선언하면 열 간격만 다시 바꿀 수 있지만 순서를 거꾸로 쓰면 뒤의 gap이 두 값을 다시 정합니다. 개별 정의는 row-gap 문서와 column-gap 문서를 참고할 수 있습니다.