CSS의 grid-gap 속성을 사용하면 그리드(Grid) 레이아웃에서 행(row)과 열(column) 사이의 간격을 손쉽게 설정할 수 있습니다. 아래 예제 코드를 직접 실행해 보면서 grid-gap 속성이 실제로 어떻게 동작하는지 확인해 보세요.
grid-gap 속성의 기본 문법
grid-gap 속성은 하나 또는 두 개의 값을 가질 수 있습니다.
- 값이 하나일 때: 행과 열 사이의 간격이 모두 동일하게 적용됩니다. (예:
grid-gap: 20px;) - 값이 두 개일 때: 첫 번째 값은 행 간격(row-gap), 두 번째 값은 열 간격(column-gap)에 적용됩니다. (예:
grid-gap: 20px 20px;)
참고: grid-gap은 이전 명칭이며, 현재는 표준화된 gap 속성으로 대체되었습니다. 최신 브라우저에서는 gap: 20px 20px;와 같이 사용하는 것이 권장되지만, 하위 호환성을 위해 grid-gap도 여전히 동작합니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-gap: 20px 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>
위 코드를 실행하면 초록색 배경의 그리드 컨테이너 안에 2열 구조로 6개의 주황색 요소가 배치되며, 각 요소 사이에 20px의 균일한 간격이 생기는 것을 확인할 수 있습니다. 간격 값을 조절하면서 레이아웃이 어떻게 변하는지 실험해 보세요.