Download

Sponsor

Route Planner and Route Optimizer

Grid Cells


Adjust the width and height of each individual cell

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.

Description Class Example
Which column the cell starts at is-col-start
<div class="is-col-start-2"></div>
Which column the cell ends at, counting from the end is-col-from-end
<div class="is-col-from-end-1"></div>
How many columns the cell will span is-col-span
<div class="is-col-span-3"></div>
Which row the cell starts at is-row-start
<div class="is-row-start-2"></div>
Which row the cell ends at, counting from the end is-row-from-end
<div class="is-row-from-end-1"></div>
How many rows the cell will span is-row-span
<div class="is-row-span-3"></div>

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>

How to support Bulma

#native_company# #native_desc#
#native_cta#