[CSS] Grid와 Flex에서의 gap

gap

• 정의 : Grid나 Flexbox 컨테이너 안에서 자식 요소들 사이의 간격을 지정하는 CSS 속성
• 행(Row)과 열(Column) 사이 간격을 동시에 또는 개별적으로 조절할 수 있음
• gap의 외곽 여백은 padding이 담당
• flex의 gap과 grid의 gap 모두 IE에서 미지원
• 실무에서 반응형 작업 시 모바일은 세로 간격만 넓히고, 가로 간격은 줄이는 패턴이 많음.
• 일부 CSS 프레임워크(예: Bootstrap 4 이하)나 컴포넌트 라이브러리에서는 margin 기반 spacing 유틸리티를 많이 씀.
  gap을 쓰면 해당 spacing과 중복되거나 불필요한 여백이 생길 수 있으니, 스타일 가이드 정리 필요.

gap: 20px;           /* 행과 열 모두 20px */
gap: 10px 30px;      /* 행은 10px, 열은 30px */
row-gap: 10px;       /* 행 간격만 */
column-gap: 30px;    /* 열 간격만 */

---

gap 간격과 여백

• gap은 자식 요소 사이의 간격만 조절하고, 첫 번째/마지막 요소 바깥 여백은 주지 않음
• 반대로 margin을 쓰면 요소 외곽에도 여백이 생겨서, 전체 폭이 밀리는 문제가 있음.
• 따라서 외곽 여백은 padding, 내부 여백은 gap으로 나누어 쓰는 게 깔끔

---

gap은 자식 요소 사이의 간격만 조절

• gap은 컨테이너 내부에서 자식 요소끼리 떨어져 있는 거리만 정의
• 첫 번째 요소 앞, 마지막 요소 뒤에는 간격이 전혀 적용되지 않음.
• 즉, gap은 내부 간격 전용 속성

.container {
  display: flex;
  gap: 20px;
}

/*
[요소1][20px][요소2][20px][요소3]
맨 앞/뒤에는 20px이 없음.
*/

---

margin으로 간격을 조절하지 않음

• margin은 각 요소 자기 자신을 둘러싼 외부 공간을 설정
• 첫 번째 요소의 왼쪽 margin, 마지막 요소의 오른쪽 margin까지 포함되므로 전체 레이아웃 폭이 늘어나거나 밀림 현상이 발생할 수 있음
• nth-child로 첫/마지막 margin 제거 같은 보정 코드 필요

.container > * {
  margin-right: 20px;
}

/*
[20px][요소1][20px][요소2][20px][요소3][20px]
→ 첫 번째 요소 앞, 마지막 요소 뒤에도 여백이 생김 → 전체 폭 계산에 영향.
*/

---

외곽 여백은 padding, 내부 여백은 gap으로 나누기

• 외곽 여백: 부모 컨테이너에 padding을 주어 전체 영역 안쪽에 공간 확보.
• 내부 여백: 자식 간 간격은 gap으로 처리 → 외곽과 내부 간격을 독립적으로 제어 가능
• 컨테이너와 화면 테두리 간 거리(외곽)는 padding으로 안정적으로 확보
• 아이템 간 간격(내부)은 gap으로 균일하게 설정
• 둘이 독립적이라 반응형 조정이 깔끔해짐

.container {
  display: flex;
  padding: 20px; /* 외곽 여백 */
  gap: 20px;     /* 내부 여백 */
}

 

---