gap 완전정복 – margin 없이 깔끔하게 간격 조절하는 법

 

 

Flexbox 레이아웃을 만들 때,
아이템 사이 간격을 주려고 margin-right, margin-bottom… 복잡하게 썼던 경험 있죠?

이젠 그럴 필요 없어요!
gap 속성 하나면 모든 아이템 간 간격을 한 번에 정리할 수 있어요!

---

 

✅ 기본 문법

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

 

gap은 아이템 사이의 공간만 설정해주는 속성이에요.
바깥쪽 여백은 적용되지 않고,
첫 요소와 마지막 요소 바깥은 건드리지 않아요!

---

 

📐 두 가지 버전으로 쓸 수 있어요

gap: 20px;        /* row + column 모두 20px */
gap: 20px 10px;   /* row 간격 20px, column 간격 10px */

💡 Flexbox에선 주로 gap: 20px 단일값으로 많이 사용
Grid에서도 똑같이 사용 가능!

---

 

🧪 실습 예시

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

<style>
.container {
  display: flex;
  gap: 16px;
}
.item {
  background: #ffa07a;
  padding: 10px 20px;
}
</style>

 

---

 

💡 왜 gap을 쓰는 게 더 좋은가요?

• 한 줄로 간격 통일 → 코드가 깔끔해짐
• 첫/마지막 요소 바깥 여백 없음 → 디자인 정렬이 안정적
• 반응형 레이아웃에서도 안정적인 간격 유지

---

 

❗ 브라우저 호환성은?

이제는 대부분의 브라우저에서 완벽히 지원됩니다.
심지어 Grid뿐 아니라 Flex에서도 gap 지원은 기본이에요.
예전처럼 margin으로 하나하나 계산할 필요 없음!