row-gap 속성
row-gap 속성은
그리드의 행 사이 간격을 설정합니다.
부모 요소의 속성 값으로
원하는 간격을
크기 단위로
지정합니다.
문법
선택자 {
row-gap: 간격;
}
예제
그리드 행 사이 간격을 설정해 봅시다:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
row-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
:
예제
이번에는 행 간격을 % 단위로 설정해 봅시다:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
row-gap: 15%;
padding: 10px;
border: 2px solid #696989;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
:
관련 내용
-
gap속성,
그리드 요소 사이 간격을 설정하는 속성 -
column-gap속성,
그리드 열 사이 간격을 설정하는 속성
