Smart Grid

Smart Grid (스마트 그리드)

Bulma v1에는 새로운 Smart Grid가 포함되어 있어요. 유연한 컬럼을 가진 2차원 레이아웃 컴포넌트로, 최소 컬럼 너비와 컬럼·행 간격이 주어지면 가능한 한 많은 컬럼을 맞춰 넣어요.

출처: 문서

본문

Bulma v1에는 새로운 Smart Grid가 포함되어 있어요. 이 그리드는 유연한 컬럼을 갖춘 2차원 레이아웃 컴포넌트예요. 최소 컬럼 너비와 컬럼·행 간격이 주어지면 Bulma가 가능한 한 많은 컬럼을 맞춰 넣어요.

기본적으로 Smart Grid는 다음을 가져요:

최소 컬럼 너비 9rem
간격 0.75rem

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6 · Cell 7 · Cell 8 · Cell 9 · Cell 10 · Cell 11 · Cell 12 · Cell 13 · Cell 14 · Cell 15 · Cell 16 · Cell 17 · Cell 18 · Cell 19 · Cell 20 · Cell 21 · Cell 22 · Cell 23 · Cell 24

<div class="grid">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
  <div class="cell">Cell 3</div>
  <div class="cell">Cell 4</div>
  <div class="cell">Cell 5</div>
  <div class="cell">Cell 6</div>
  <div class="cell">Cell 7</div>
  <div class="cell">Cell 8</div>
  <div class="cell">Cell 9</div>
  <div class="cell">Cell 10</div>
  <div class="cell">Cell 11</div>
  <div class="cell">Cell 12</div>
  <div class="cell">Cell 13</div>
  <div class="cell">Cell 14</div>
  <div class="cell">Cell 15</div>
  <div class="cell">Cell 16</div>
  <div class="cell">Cell 17</div>
  <div class="cell">Cell 18</div>
  <div class="cell">Cell 19</div>
  <div class="cell">Cell 20</div>
  <div class="cell">Cell 21</div>
  <div class="cell">Cell 22</div>
  <div class="cell">Cell 23</div>
  <div class="cell">Cell 24</div>
</div>

Smart Grid 수정자 (Smart Grid modifiers)

is-col-min 수정자 클래스를 추가하면 최소 컬럼 너비를 0부터 32까지 1.5rem 단위로 바꿀 수 있어요:

클래스	값
`is-col-min-1`	`1.5rem`
`is-col-min-2`	`3.0rem`
`is-col-min-3`	`4.5rem`
`is-col-min-4`	`6.0rem`
`is-col-min-5`	`7.5rem`
`is-col-min-6`	`9.0rem`
`is-col-min-7`	`10.5rem`
`is-col-min-8`	`12.0rem`
`is-col-min-9`	`13.5rem`
`is-col-min-10`	`15.0rem`
`is-col-min-11`	`16.5rem`
`is-col-min-12`	`18.0rem`
`is-col-min-13`	`19.5rem`
`is-col-min-14`	`21.0rem`
`is-col-min-15`	`22.5rem`
`is-col-min-16`	`24.0rem`
`is-col-min-17`	`25.5rem`
`is-col-min-18`	`27.0rem`
`is-col-min-19`	`28.5rem`
`is-col-min-20`	`30.0rem`
`is-col-min-21`	`31.5rem`
`is-col-min-22`	`33.0rem`
`is-col-min-23`	`34.5rem`
`is-col-min-24`	`36.0rem`
`is-col-min-25`	`37.5rem`
`is-col-min-26`	`39.0rem`
`is-col-min-27`	`40.5rem`
`is-col-min-28`	`42.0rem`
`is-col-min-29`	`43.5rem`
`is-col-min-30`	`45.0rem`
`is-col-min-31`	`46.5rem`
`is-col-min-32`	`48.0rem`

gap, column-gap, row-gap도 0.5rem 단위로 바꿀 수 있어요:

간격 클래스	컬럼 간격	행 간격	값
`is-gap-0`	`is-column-gap-0`	`is-row-gap-0`	`0.0rem`
`is-gap-1`	`is-column-gap-1`	`is-row-gap-1`	`0.5rem`
`is-gap-2`	`is-column-gap-2`	`is-row-gap-2`	`1.0rem`
`is-gap-3`	`is-column-gap-3`	`is-row-gap-3`	`1.5rem`
`is-gap-4`	`is-column-gap-4`	`is-row-gap-4`	`2.0rem`
`is-gap-5`	`is-column-gap-5`	`is-row-gap-5`	`2.5rem`
`is-gap-6`	`is-column-gap-6`	`is-row-gap-6`	`3.0rem`
`is-gap-7`	`is-column-gap-7`	`is-row-gap-7`	`3.5rem`
`is-gap-8`	`is-column-gap-8`	`is-row-gap-8`	`4.0rem`

더 알아보기 (Learn more)

Bulma Fixed Grid (고정 그리드) — 고정 컬럼 수 그리드
Bulma Grid Cells (그리드 셀) — 셀 위치·너비 조정