Bulmaグリッドは複数のセルで構成されています。各ブレークポイントごとに、これらのセルの幅と高さを個別に調整できます。
スポンサー
グリッドセル
各セルの幅と高さを調整します。
| 説明 | クラス | 例 |
|---|---|---|
| セルが開始する列 | is-col-start |
|
| セルが終了する列（最後から数えて） | is-col-from-end |
|
| セルが跨ぐ列数 | is-col-span |
|
| セルが開始する行 | is-row-start |
|
| セルが終了する行（最後から数えて） | is-row-from-end |
|
| セルが跨ぐ行数 | is-row-span |
|
列の開始 #
セルが終了する列を（最後から数えて）変更します。
セル1
セル2
セル3
セル4
セル5
セル6
HTML
<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>列の終了（最後から） #
セルが開始する列を変更します。
セル1
セル2
セル3
セル4
セル5
セル6
HTML
<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>列の跨ぎ #
セルが跨ぐ列数を変更します。
セル1
セル2
セル3
セル4
セル5
セル6
HTML
<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>行の開始 #
セルが終了する行を（最後から数えて）変更します。
セル1
セル2
セル3
セル4
セル5
セル6
HTML
<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>行の終了（最後から） #
セルが開始する行を変更します。
セル1
セル2
セル3
セル4
セル5
セル6
HTML
<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>行の跨ぎ #
セルが跨ぐ行数を変更します。
セル1
セル2
セル3
セル4
セル5
セル6
HTML
<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>