칼럼 간격

칼럼 간격 (Columns gap)

각 칼럼은 $column-gap 변수값과 동일한 간격을 가지는데, 기본값은 0.75rem이에요. 간격은 칼럼의 양쪽에 생기기 때문에, 인접한 두 칼럼 사이의 간격은 $column-gap의 두 배인 1.5rem이 기본값입니다.

출처: 문서

본문

간격 없애기 (Gapless)

칼럼 사이의 공간을 없애고 싶다면, columns 컨테이너에 is-gapless 수식어(modifier)를 추가하면 됩니다:

<div class="columns is-gapless">
  <div class="column">No gap</div>
  <div class="column">No gap</div>
  <div class="column">No gap</div>
  <div class="column">No gap</div>
</div>

is-multiline 수식어와 함께 사용할 수도 있어요. 아래 예시처럼 여러 줄로 배치하면서 칼럼 크기도 지정할 수 있습니다:

<div class="columns is-gapless is-multiline is-mobile">
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-half">is-half</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column is-one-quarter">is-one-quarter</div>
  <div class="column">Auto</div>
</div>

가변 간격 (Variable gap)

.columns 컨테이너에 9가지 수식어 중 하나를 붙여서 커스텀 칼럼 간격을 지정할 수 있어요.

• is-0은 모든 간격을 제거합니다 (is-gapless와 비슷해요).
• is-3은 기본값으로, 0.75rem 값과 동일합니다.
• is-8은 최대 간격인 2rem입니다.

<div class="columns is-8">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

브레이크포인트별 칼럼 간격 (Breakpoint based column gaps)

뷰포트 크기마다 서로 다른 칼럼 간격을 정의할 수도 있어요. 예를 들어 다음과 같은 수식어를 사용하면 됩니다: is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd

<div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

차이를 확인하고 싶다면 브라우저 창을 줄였다 늘리면서 칼럼 간격이 어떻게 변하는지 살펴보세요.

더 알아보기 (Learn more)

• Columns 옵션 (Options)
• Columns 중첩 (Nesting)