Each Bulma grid is comprised of several cells. You can adjust the width and height of each of these cells individually, and for each separate breakpoint.
Sponsor
Grid Cells
Adjust the width and height of each individual cell
| Description | Class | Example |
|---|---|---|
| Which column the cell starts at | is-col-start |
|
| Which column the cell ends at, counting from the end | is-col-from-end |
|
| How many columns the cell will span | is-col-span |
|
| Which row the cell starts at | is-row-start |
|
| Which row the cell ends at, counting from the end | is-row-from-end |
|
| How many rows the cell will span | is-row-span |
|
Column Start #
Change which column a cell starts at.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 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>Column From End #
Change which column a cell ends at, counting from the end.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 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>Column Span #
Change how many columns a cell spans.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 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>Row Start #
Change which row a cell starts at.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 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>Row From End #
Change which row a cell ends at, counting from the end.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 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>Row Span #
Change how many rows a cell spans.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 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>
