[grid] CSS - row-gap 속성(C) - (grid/flex)레이아웃 행간 간격 지정 (= row-gap속성 = 로우갭속성)

1. row-gap 예제 - grid 경우, 행간 간격
2. row-gap 정의
3. row-gap 구문
4. 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>

 

결과보기