목차
- row-gap 예제 - grid 경우, 행간 간격
- row-gap 정의
- row-gap 구문
- row-gap 예제 - flex 경우, 행간 간격
row-gap 예제 - grid 경우, 행간 간격
<style>
#grid-box {
border: 1px solid black;
background-color: mintcream;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
row-gap: 50px;
}
#grid-box > div {
background-color: lightgreen;
padding: 10px;
margin: 3px;
}
</style>
<div id="grid-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
결과보기
row-gap 정의
(grid / flex) 레이아웃에서 행간 간격 지정.
1.
row-gap 속성은 이전에 grid-row-gap 속성으로 알려져 있었음.
2.
- 기본값: normal
- 상속여부: X
- 애니가능: O
- CSS버전: CSS Box Alignment Module Level 3
- JS구문: object.style.rowGap="100px"
3.
주요 최신 브라우저 모두 지원.
row-gap 구문
selector {row-gap: length|normal|initial|inherit;}
[속성값]
length
지정 길이로 지정. (예: 100px)
normal
보통 간격으로 지정. (기본값)
initial
이 속성의 기본값으로 지정.
inherit
부모요소의 속성값 상속.
row-gap 예제 - flex 경우, 행간 간격
<style>
#flex-box {
border: 1px solid black;
background-color: mintcream;
display: flex;
flex-wrap: wrap;
row-gap: 100px;
}
#flex-box > div {
border: 1px solid black;
width: 10%;
aspect-ratio: 2;
padding: 10px;
background-color: lightgreen;
}
</style>
<div id="flex-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
결과보기
