Grid Cells

Grid Cells (그리드 셀)

모든 Bulma 그리드는 여러 개의 셀로 이루어져요. 각 셀의 너비와 높이를 개별적으로, 그리고 각 브레이크포인트별로 조정할 수 있어요.

출처: 문서

본문

모든 Bulma 그리드는 여러 개의 셀로 이루어져 있어요. 이 셀 각각의 너비와 높이를 개별적으로, 그리고 각 브레이크포인트별로 조정할 수 있어요.

설명 클래스 예시
셀이 시작하는 컬럼 is-col-start ```html
``` | | 셀이 *끝에서부터 세어* **끝나는** 컬럼 | `is-col-from-end` | ```html
``` | | 셀이 차지할 **컬럼 수** | `is-col-span` | ```html
``` | | 셀이 **시작**하는 행 | `is-row-start` | ```html
``` | | 셀이 *끝에서부터 세어* **끝나는** 행 | `is-row-from-end` | ```html
``` | | 셀이 차지할 **행 수** | `is-row-span` | ```html
``` |

컬럼 시작 (Column Start)

셀이 시작하는 컬럼을 바꿔요.

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6

<div class="fixed-grid has-4-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-col-start-3">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>
</div>

끝에서부터 컬럼 (Column From End)

끝에서부터 세어 셀이 끝나는 컬럼을 바꿔요.

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6

<div class="fixed-grid has-4-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-col-from-end-2">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>
</div>

컬럼 병합 (Column Span)

셀이 차지하는 컬럼 수를 바꿔요.

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6

<div class="fixed-grid has-4-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-col-span-2">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>
</div>

행 시작 (Row Start)

셀이 시작하는 행을 바꿔요.

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6

<div class="fixed-grid has-4-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-row-start-3">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>
</div>

끝에서부터 행 (Row From End)

끝에서부터 세어 셀이 끝나는 행을 바꿔요.

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6

<div class="fixed-grid has-4-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-row-from-end-1">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>
</div>

행 병합 (Row Span)

셀이 차지하는 행 수를 바꿔요.

Cell 1 · Cell 2 · Cell 3 · Cell 4 · Cell 5 · Cell 6

<div class="fixed-grid has-4-cols">
  <div class="grid">
    <div class="cell">Cell 1</div>
    <div class="cell is-row-span-2">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>
</div>

더 알아보기 (Learn more)