CSS의 grid-column-gap 속성을 사용하면 그리드(Grid) 레이아웃에서 열과 열 사이의 간격을 손쉽게 조절할 수 있습니다. 이 속성에 원하는 크기를 지정하면 각 열 사이에 일정한 여백이 자동으로 적용되어, 복잡한 마진 계산 없이도 깔끔한 레이아웃을 만들 수 있습니다.
grid-column-gap 기본 문법
grid-column-gap: <간격 크기>;
값에는 px, em, rem, % 등 다양한 단위를 사용할 수 있으며, 음수 값은 허용되지 않습니다.
예제 코드
아래 예제는 두 개의 열로 구성된 그리드에서 열 사이에 20px의 간격을 적용한 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-column-gap: 20px;
}
.ele {
background-color: orange;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class="container">
<div class="ele">1</div>
<div class="ele">2</div>
<div class="ele">3</div>
<div class="ele">4</div>
<div class="ele">5</div>
<div class="ele">6</div>
</div>
</body>
</html>코드 설명
- display: grid — .container 요소를 그리드 컨테이너로 지정합니다.
- grid-template-columns: auto auto — 자동 너비를 가진 두 개의 열을 생성합니다.
- grid-column-gap: 20px — 열과 열 사이에 20px의 간격을 설정합니다.
- .ele 스타일 — 각 그리드 항목에 배경색, 테두리, 패딩 등을 적용해 시각적으로 구분합니다.
참고: 최신 gap 속성 사용하기
grid-column-gap은 현재 column-gap으로 이름이 변경되었으며, 행 간격을 담당하는 row-gap과 함께 축약형 속성인 gap 사용이 권장됩니다.
/* 기존 방식 */ grid-column-gap: 20px; /* 최신 권장 방식 */ column-gap: 20px; /* 행과 열 간격을 한 번에 설정 */ gap: 10px 20px; /* row-gap column-gap */
다만 구버전 브라우저와의 호환성을 위해 grid-column-gap 속성도 여전히 지원되므로, 상황에 맞게 선택하여 사용하시면 됩니다.