[bootstrap] 콘텐츠 간의 gap을 다루는 gx-*, gy-*, g-* 클래스

부트스트랩에서 gx-*, gy-*, g-* 클래스는 콘텐츠 간의 gap을 정의할 때 사용하는 클래스입니다. 

 

gx-*는 수평 방향의 갭, gy-*는 수직 방향의 갭, g-*는 수평, 수직 방향의 갭을 정의할 때 사용합니다.

 

gx-1부터 gx-5까지 사용가능한데 5로 갈수록 콘텐츠 사이의 갭이 더 커집니다.

 

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

 

 

<div class="container overflow-hidden text-center">
  <div class="row gx-1 gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

 

 

참고자료

[1] https://getbootstrap.com/docs/5.3/layout/gutters/