CSS row-gap: 행 사이 간격

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

CSS row-gap 속성은 요소의 행 사이 간격을 설정합니다.

초기 명세에서는 grid-row-gap이라는 이름을 사용했습니다. 구형 브라우저와의 호환성 유지를 위해, grid-row-gap 역시 이 속성의 별칭으로 인식됩니다.

.grid {
  row-gap: 0;
  /* row-gap: 8px; */
  /* row-gap: 33%; */
}

.grid {
  width: 300px;
  border: 1px solid #ccc;
  color: #fff;
  display: grid;
  grid: auto-flow / 1fr 1fr;
  padding: 8px;
}
.item {
  background: #f0f0f0;
  color: #000;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
}
.item:nth-child(1) {
  background: #24c0a5;
  color: #fff;
}
.item:nth-child(2) {
  background: #0043ff;
  color: #fff;
}
.item:nth-child(3) {
  background: #b42809;
  color: #fff;
}
.item:nth-child(4) {
  background: #ffb800;
  color: #fff;
}

<div class="grid">
  <div class="item">1번</div>
  <div class="item">2번</div>
  <div class="item">3번</div>
  <div class="item">4번</div>
  <div class="item">5번</div>
</div>

불러오는 중...

구문

/* <length> 값 */
row-gap: 3px;
row-gap: 2.5em;

/* <percentage> 값 */
row-gap: 3%;

/* 전역 값 */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

row-gap 속성에는 한 개의 <length-percentage>를 사용합니다.

값

<length-percentage>: 행 간격을 길이 또는 백분율로 설정합니다. 양의 값이어야 합니다.

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS		Android
	Safari	Chrome	Firefox	Safari	Safari WebView	Chrome	Android WebView	Firefox	Samsung Internet
`row-gap`
Supported in Flex Layout
Supported in Grid Layout
`normal`

같이 보기

열 사이 간격: column-gap