Grid

<div class="grid">
  <div class="column">
    <div class="button is-block">1</div>
  </div>
  <div class="column">
    <div class="button is-block">2</div>
  </div>
  <div class="column">
    <div class="button is-block">3</div>
  </div>
  <div class="column">
    <div class="button is-block">4</div>
  </div>
</div>

.grid
  .column
    .button.is-block 1
  .column
    .button.is-block 2
  .column
    .button.is-block 3
  .column
    .button.is-block 4

<div class="grid">
  <div class="column is-2">
    <label class="label is-block is-primary">.is-2</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-3">
    <label class="label is-block is-primary">.is-3</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-4">
    <label class="label is-block is-primary">.is-4</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-5">
    <label class="label is-block is-primary">.is-5</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-6">
    <label class="label is-block is-primary">.is-6</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-7">
    <label class="label is-block is-primary">.is-7</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-8">
    <label class="label is-block is-primary">.is-8</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-9">
    <label class="label is-block is-primary">.is-9</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-10">
    <label class="label is-block is-primary">.is-10</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>


<div class="grid">
  <div class="column is-11">
    <label class="label is-block is-primary">.is-11</label>
  </div>
  <div class="column is-1">
    <label class="label is-block">1</label>
  </div>
</div>

.grid
  .column.is-2
    label.label.is-block.is-primary .is-2
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-3
    label.label.is-block.is-primary .is-3
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-4
    label.label.is-block.is-primary .is-4
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-5
    label.label.is-block.is-primary .is-5
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-6
    label.label.is-block.is-primary .is-6
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-7
    label.label.is-block.is-primary .is-7
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-8
    label.label.is-block.is-primary .is-8
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-9
    label.label.is-block.is-primary .is-9
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-10
    label.label.is-block.is-primary .is-10
  .column.is-1
    label.label.is-block 1
  .column.is-1
    label.label.is-block 1


.grid
  .column.is-11
    label.label.is-block.is-primary .is-11
  .column.is-1
    label.label.is-block 1

<div class="grid">
  <div class="column is-4 is-offset-4">
    <div class="button is-block">.is-4.is-offset-4</div>
  </div>
</div>

<div class="grid">
  <div class="column is-6 is-offset-3">
    <div class="button is-block">.is-6.is-offset-3</div>
  </div>
</div>

<div class="grid">
  <div class="column is-5 is-offset-7">
    <div class="button is-block">.is-5.is-offset-7</div>
  </div>
</div>

<div class="grid">
  <div class="column is-11 is-offset-1">
    <div class="button is-block">.is-11.is-offset-1</div>
  </div>
</div>

.grid
  .column.is-4.is-offset-4
    .button.is-block .is-4.is-offset-4

.grid
  .column.is-6.is-offset-3
    .button.is-block .is-6.is-offset-3

.grid
  .column.is-5.is-offset-7
    .button.is-block .is-5.is-offset-7

.grid
  .column.is-11.is-offset-1
    .button.is-block .is-11.is-offset-1

<div class="grid is-shrink">
  <div class="column">
    <div class="button is-block">Columns take only the size</div>
  </div>
  <div class="column">
    <div class="button is-block">of their content</div>
  </div>
  <div class="column">
    <div class="button is-block">with class </div>
  </div>
  <div class="column">
    <div class="button is-block">.is-shrink</div>
  </div>
</div>

.grid.is-shrink
  .column
    .button.is-block Columns take only the size
  .column
    .button.is-block of their content
  .column
    .button.is-block with class
  .column
    .button.is-block .is-shrink

<div class="grid is-relaxed">
  <div class="column">
    <div class="button is-block">Removes gutters</div>
  </div>
  <div class="column">
    <div class="button is-block is-primary">between columns</div>
  </div>
  <div class="column">
    <div class="button is-block">with class </div>
  </div>
  <div class="column">
    <div class="button is-block is-primary">.is-relaxed</div>
  </div>
</div>

.grid.is-relaxed
  .column
    .button.is-block Removes gutters
  .column
    .button.is-block.is-primary between columns
  .column
    .button.is-block with class
  .column
    .button.is-block.is-primary .is-relaxed

<div class="grid is-start">
  <div class="column is-4">
    <div class="button is-block">is-start</div>
  </div>
</div>

<div class="grid is-center">
  <div class="column is-4">
    <div class="button is-block">is-center</div>
  </div>
</div>

<div class="grid is-end">
  <div class="column is-4">
    <div class="button is-block">is-end</div>
  </div>
</div>

.grid.is-start
  .column.is-4
    .button.is-block is-start

.grid.is-center
  .column.is-4
    .button.is-block is-center

.grid.is-end
  .column.is-4
    .button.is-block is-end

<div class="grid is-top is-relaxed">
  <div class="column">
    <div class="button is-block">is-top</div>
  </div>
  <div class="column">
    <div class="button is-block">is-top</div>
  </div>
</div>
<div class="grid is-middle is-relaxed">
  <div class="column">
    <div class="button is-block">is-middle</div>
  </div>
  <div class="column">
    <div class="button is-block">is-middle</div>
  </div>
</div>
<div class="grid is-bottom is-relaxed">
  <div class="column">
    <div class="button is-block">is-bottom</div>
  </div>
  <div class="column">
    <div class="button is-block">is-bottom</div>
  </div>
</div>

.grid.is-top.is-relaxed
  .column
    .button.is-block is-top
  .column
    .button.is-block is-top

.grid.is-middle.is-relaxed
  .column
    .button.is-block is-middle
  .column
    .button.is-block is-middle

.grid.is-bottom.is-relaxed
  .column
    .button.is-block is-bottom
  .column
    .button.is-block is-bottom

Grid modifiers

Choose between different modifiers to adjust how columns are displayed in the grid.

Modifier	Description	Value
shrink	columns take only the size of their content	.is-shrink
relaxed	removes gutters between columns	.is-relaxed
start	align columns to the start of the grid	.is-start
center	align columns to the center of the grid	.is-center
end	align columns to the end of the grid	.is-end
vertical	arrange columns in a vertical order	.is-vertical

Column width modifiers

Adjust the width and offset of columns on different devices.

Modifier	Description	Value
mobile	you can change the column width from 0 to 767px	.is-mobile-
tablet	you can change the column width from 768px to 990px	.is-tablet-
desktop	you can change the column width from 991px to 1359px	.is-desktop-
widescreen	you can change the column width from 1360px to 1919px	.is-widescreen-
ultrawide	you can change the column width from 1920px to up	.is-ultrawide-

Note: you can use .is-[$number] instead of .is-mobile-[$number], as a shorthand.

Column Offset modifiers

Adjust the width and offset of columns on different devices.

Modifier	Description	Value
mobile	you can change the column offset from 0 to 767px	.is-offset-mobile-
tablet	you can change the column offset from 768px to 990px	.is-offset-tablet-
desktop	you can change the column offset from 991px to 1359px	.is-offset-desktop-
widescreen	you can change the column offset from 1360px to 1919px	.is-offset-widescreen-
ultrawide	you can change the column offset from 1920px to up	.is-offset-ultrawide-