Sizes

The grid can be divided into 12 columns, there are size classes for each division:

  • is-1
  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11
  • is-12

is-3

is-6

is-3

<div class="columns">
    <div class="column is-3">is-3</div>
    <div class="column is-6">is-6</div>
    <div class="column is-3">is-3</div>
</div>

How does this work?

Each class is named after how many columns you want out of 12. So if you want 6 columns out of 12, use is-6.

All other columns without a defined size will fill the remaining space automatically.

is-1

1

1

1

1

1

1

1

1

1

1

1

is-2

1

1

1

1

1

1

1

1

1

1

is-3

1

1

1

1

1

1

1

1

1

is-4

1

1

1

1

1

1

1

1

is-5

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-7

1

1

1

1

1

is-8

1

1

1

1

is-9

1

1

1

is-10

1

1

is-11

1

is-12

Offset

You could use empty columns (<div class="column"></div>) to create empty horizontal space around column elements, but that also creates clutter, it's best to use the offset modifier like is-offset-x:

is-6
is-offset-3

is-4
is-offset-8

<div class="columns">
    <div class="column is-6 is-offset-3">
        <code>is-6</code><br/>
        <code>is-offset-3</code>
    </div>
</div>
<div class="columns">
    <div class="column is-4 is-offset-8">
        <code>is-4</code><br/>
        <code>is-offset-8</code>
    </div>
</div>
← Responsiveness →