CSS의 grid-row-gap 속성을 사용하면 그리드(Grid) 레이아웃에서 행과 행 사이의 간격을 쉽게 조절할 수 있습니다. 이 속성에 픽셀(px), 퍼센트(%) 등 원하는 크기 값을 지정하면 각 행 사이에 일정한 여백이 자동으로 생성됩니다.
grid-row-gap 속성이란?
grid-row-gap은 CSS Grid 컨테이너 내부에서 행(row) 사이의 간격을 정의하는 속성입니다. 참고로 현재 CSS 표준에서는 이 속성이 row-gap으로 대체되었지만, 하위 브라우저 호환성을 위해 여전히 널리 사용되고 있습니다.
주요 특징
- 행 사이에만 간격을 적용하며, 열(column) 간격은 별도의 grid-column-gap 속성으로 설정합니다.
- 두 속성을 한 번에 지정하려면 축약형인 gap 속성을 사용할 수 있습니다.
- 음수 값은 허용되지 않습니다.
예제 코드
다음 코드를 실행하면 2열 구조의 그리드에서 행 사이에 20px 간격이 적용된 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-column-gap: 20px;
grid-row-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>코드 설명
- .container: display: grid;를 선언해 그리드 컨테이너로 지정하고, grid-template-columns: auto auto;로 두 개의 열을 생성합니다. 초록색 배경 위에 20px의 안쪽 여백(padding)을 두었습니다.
- grid-column-gap: 20px;와 grid-row-gap: 20px;: 열 사이와 행 사이 모두 20px씩 간격을 부여합니다.
- .ele: 주황색 배경과 회색 테두리를 가진 그리드 아이템 스타일로, 숫자가 중앙에 정렬되어 게임 보드 형태로 표시됩니다.
이처럼 grid-row-gap 속성 하나만으로 복잡한 margin 계산 없이 깔끔한 행 간격을 만들 수 있어, 카드 목록이나 격자형 UI를 구현할 때 매우 유용합니다.