칼럼 크기
칼럼 크기 (Column sizes)
단일 칼럼의 크기를 바꾸고 싶다면 다음과 같은 클래스 중 하나를 사용할 수 있어요: is-three-quarters, is-two-thirds, is-half, is-one-third, is-one-quarter, is-full. 나머지 칼럼들은 자동으로 남은 공간을 채웁니다.
출처: 문서
본문
추가로 20%의 배수도 사용할 수 있어요: is-four-fifths, is-three-fifths, is-two-fifths, is-one-fifth.
<div class="columns">
<div class="column is-four-fifths">is-four-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-three-quarters">is-three-quarters</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-two-thirds">is-two-thirds</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-three-fifths">is-three-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-half">is-half</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-two-fifths">is-two-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-third">is-one-third</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-fifth">is-one-fifth</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
12칸 시스템 (12 columns system)
그리드는 12칸으로 나눌 수 있기 때문에, 각 분할에 해당하는 크기 클래스가 있습니다: is-1, is-2, is-3, is-4, is-5, is-6, is-7, is-8, is-9, is-10, is-11, is-12.
명명 규칙: 각 수식어 클래스는 12칸 중 몇 칸을 차지할지에 따라 이름이 붙습니다. 예를 들어 12칸 중 7칸을 쓰고 싶다면 is-7을 사용하면 돼요.
Offset
.column 요소 주변에 가로 공간을 만들기 위해 빈 칼럼을 사용할 수도 있지만, .is-offset-x 같은 offset 수식어를 사용할 수도 있어요:
<div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter"></div>
</div>
<div class="columns is-mobile">
<div class="column is-three-fifths is-offset-one-fifth"></div>
</div>
<div class="columns is-mobile">
<div class="column is-4 is-offset-8"></div>
</div>
<div class="columns is-mobile">
<div class="column is-11 is-offset-1"></div>
</div>
좁은 칼럼 (Narrow column)
칼럼이 필요한 만큼만 공간을 차지하게 하려면 is-narrow 수식어를 사용하세요. 나머지 칼럼들이 남은 공간을 채웁니다.
<div class="columns">
<div class="column is-narrow">
<div class="box" style="width: 200px">
<p class="title is-5">Narrow column</p>
<p class="subtitle">This column is only 200px wide.</p>
</div>
</div>
<div class="column">
<div class="box">
<p class="title is-5">Flexible column</p>
<p class="subtitle">
This column will take up the remaining space available.
</p>
</div>
</div>
</div>
크기 수식어와 마찬가지로, 다양한 브레이크포인트에 맞는 좁은 칼럼도 만들 수 있어요: .is-narrow-mobile, .is-narrow-tablet, .is-narrow-touch, .is-narrow-desktop, .is-narrow-widescreen, .is-narrow-fullhd.