[grid] CSS - gap 속성(C) - (행/열) 사이의 간격 지정 (= gap속성 =갭속성) ※ (그리드/플렉스/컬럼) 간격

목차

1. gap 예제 - grid 경우, (행/열) 사이의 간격 지정
2. gap 정의
3. gap 구문
4. gap 예제 - flex 경우, (행/열) 사이의 간격 지정
5. gap 예제 - column 경우, (열) 사이의 간격 지정

gap 예제 - grid 경우, (행/열) 사이의 간격 지정

 

<style> 

.grid-box {

  border: 1px solid gray;

  background-color: mintcream;

  display: grid;

  grid-template-columns: auto auto auto;

  gap: 30px;

}

.grid-box > div {

  padding: 10px 20px;

  border: 1px solid black;

  background-color: lightgreen;

  text-align:center;

}

</style>

<div class="grid-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>

 

결과보기

gap 정의

 

(grid / flex) 레이아웃의 "행/열" 사이의 간격이나 (column) 시스템에서 (열) 사이의 간격을 지정.

 

---

 

1.

• gap 속성은 (row-gap / column-gap) 속성의 단축 표현.
• 기존엔 grid-gap 속성으로 알려져 있었음.
• grid-gap 속성은 (grid-row-gap / grid-column-gap) 속성의 단축 표현.

2.  

• 기본값: normal normal
• 상속여부: X
• 애니가능: O
• CSS버전: CSS Box Alignment Module Level 3
• JS구문: object.style.gap="25px 50px"

3. 

주요 최신 브라우저 모두 지원.

 

gap 구문

 

selector {gap: row-gap column-gap|initial|inherit;}

 

---

[속성값]

 

row-gap

행간의 간격

column-gap
열간의 간격 (※ row-gap 값과 동일 시, 생략 가능.)

initial

이 속성의 기본값 사용.

inherit
부모요소의 속성값 상속

 

PS. row-gap과 column-gap 값 동일 시, 1개만 적어됨 (예) gap: 50px;

gap 예제 - flex 경우, (행/열) 사이의 간격 지정

 

<style>

#flex-box {

  border: 1px solid silver;

  background-color: mintcream;

  display: flex;

  flex-wrap: wrap;

  gap: 20px 70px;

}

#flex-box > div {

  border: 1px solid black;

  width: 10%;

  aspect-ratio: 2;

  padding: 10px;

  background-color: lightgreen;

  text-align:center;

}

</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>

결과보기

gap 예제 - column 경우, (열) 사이의 간격 지정

 

<style>

#column-box {

  border: solid black 1px;

  background-color: mintcream;

  columns: 3;

  gap: 25px;

}

</style>

<div id="column-box">

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus dui. Duis mollis dictum eros id elementum. Nunc et gravida tortor. Suspendisse ut ornare ex, quis eleifend nibh. Cras cursus ornare est, vitae imperdiet sapien tempus egestas. Maecenas vel molestie velit. Aliquam consequat, tortor eget interdum feugiat, dolor urna finibus erat, ut scelerisque nisi est ac nibh. Vestibulum convallis mauris ipsum, non suscipit purus vestibulum vitae. Suspendisse massa augue, laoreet sed euismod ac, congue eu ex. Curabitur sem erat, tempus at magna eu, vestibulum mollis purus. Integer posuere dapibus efficitur.

</div>

결과보기