CSS Grid에서 행 사이 간격 크기 지정하기

CSS Grid 레이아웃에서 행(row)과 행 사이의 간격을 조절하려면 grid-row-gap 속성을 사용합니다. 이 속성에 원하는 크기(px, %, rem 등)를 지정하면 각 행 사이에 일정한 여백이 자동으로 적용됩니다.

grid-row-gap 기본 문법

.container {
  display: grid;
  grid-row-gap: 50px; /* 행 사이 간격을 50px로 설정 */
}

참고로 열(column) 사이의 간격은 grid-column-gap 속성으로 지정할 수 있으며, 두 속성을 한 번에 처리하고 싶다면 최신 표준인 gap 축약 속성을 사용하는 것도 좋은 방법입니다. 예를 들어 gap: 50px 30px;처럼 작성하면 첫 번째 값은 행 간격, 두 번째 값은 열 간격에 적용됩니다.

예제 코드

아래 예제는 grid-row-gap과 grid-column-gap을 함께 사용해 그리드 항목들 사이에 여백을 만든 전체 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-auto-rows: 50px;
  grid-column-gap: 30px;
  grid-row-gap: 50px;
  background-color: #95A5A6;
  padding: 10px;
}
.container > div {
  background-color: #F0F3F4;
  text-align: center;
  padding: 10px 0;
  font-size: 20px;
}
.ele3 {
  grid-column-end: span 2;
}
</style>
</head>
<body>
<div class="container">
<div class="ele1">1</div>
<div class="ele2">2</div>
<div class="ele3">3</div>
<div class="ele4">4</div>
<div class="ele5">5</div>
<div class="ele6">6</div>
</div>
</body>
</html>

코드 설명

display: grid; – 컨테이너를 그리드 레이아웃으로 설정합니다.
grid-auto-rows: 50px; – 자동 생성되는 모든 행의 높이를 50px로 지정합니다.
grid-row-gap: 50px; – 행 사이의 간격을 50px로 설정합니다.
grid-column-gap: 30px; – 열 사이의 간격을 30px로 설정합니다.
.ele3 { grid-column-end: span 2; } – 세 번째 요소가 두 개의 열을 차지하도록 확장합니다.

위 코드를 실행하면 회색 배경의 그리드 컨테이너 안에 밝은 색상의 숫자 카드들이 배치되며, 행 사이에는 50px, 열 사이에는 30px의 균일한 간격이 적용된 것을 확인할 수 있습니다.

CSS Grid에서 행 사이 간격 크기 지정하기 – grid-row-gap 속성 활용법

grid-row-gap 기본 문법

예제 코드

코드 설명