Grid

A simple flexbox grid for building responsive layouts

You can use the OrbitCSS Grid module and the power of flexbox to build countless different layouts. To get started you'll need to create a grid block. The grid class creates a simple flex container and the column elements are what make up the layout within the grid. Use the column class to define your column elements.

I'm a column!
<div class="grid">
  <div class="column">
    I'm a column!
  </div>
</div>
Copy

By default, a column will take up all of the room available to it. As soon as you add additional columns, that room will be divided up equally among them. The exception to this is on mobile viewports, where the column width will always be 100% unless otherwise specified using responsive modifiers.


Equal width
Equal width
Equal width
Equal width
<div class="grid">
  <div class="column">
    Equal width
  </div>
  <div class="column">
    Equal width
  </div>
  <div class="column">
    Equal width
  </div>
  <div class="column">
    Equal width
  </div>
</div>
Copy

Column sizes

To give you control over the distribution of space within your grid, several size modifiers exist. These modifiers allow you to allocate varying shares of the space to individual columns.

  • is-one-quarter - 25%
  • is-one-third - 33.33%
  • is-half - 50%
  • is-two-thirds - 66.66%
  • is-three-quarters - 75%
  • is-full - 100%
is-one-quarter
Auto
Auto
is-one-third
Auto
Auto
is-half
Auto
Auto
is-two-thirds
Auto
Auto
is-three-quarters
Auto
Auto
is-full
<div class="grid">
  <div class="column is-one-quarter">
    is-one-quarter
  </div>
  ..
</div>

<div class="grid">
  <div class="column is-one-third">
    is-one-third
  </div>
  ..
</div>

<div class="grid">
  <div class="column is-half">
    is-half
  </div>
  ..
</div>

<div class="grid">
  <div class="column is-two-thirds">
    is-two-thirds
  </div>
  ..
</div>

<div class="grid">
  <div class="column is-three-quarters">
    is-three-quarters
  </div>
  ..
</div>

<div class="grid">
  <div class="column is-full">
    is-full
  </div>
</div>
</> Show code
Copy

Any column that cannot claim its predefined share of the space will wrap, creating rows within the grid.

I take up half the width
I wrap to ensure that I get my two third share

Not all columns require a size modifier. In our previous examples, all of the auto columns are just regular columns that share the remaining space within the row.


For convenience, a set of modifiers broken into fifths also exists.

  • is-one-fifth - 20%
  • is-two-fifths - 40%
  • is-three-fifths - 60%
  • is-four-fifths - 80%
is-one-fifth
Auto
Auto
is-two-fifths
Auto
Auto
is-three-fifths
Auto
Auto
is-four-fifths
Auto
Auto


Shrink

Sometimes you will want a column to shrink rather than grow. Use the is-shrink modifier to make an element only take up enough space it to display its content.

I only take up what space I need
I take the rest of the space
<div class="grid">
  <div class="column is-shrink">
    I only take up what space I need
  </div>
  <div class="column">
    I take the rest of the space
  </div>
</div>
Copy

12 column grid

Many popular frameworks use a grid system of 12 equal-width columns, and with good reason. The number 12 is easily divisible, resulting in grids of 12, 6, 4, 3, 2, and 1 evenly spaced columns. Naturally, the 12 column grid provides great flexibility when building advanced layouts.

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

If 12 columns do not suit your needs, the $max-cols variable can be overridden to support any number of columns. Additionally, if you want to make your own size modifiers you can take advantage of the column-size mixin.


Offset columns

Offsets provide you with additional control over the positioning of your columns. Think of them as a sort of ‘invisible column'. You will find an offset equivalent modifier for each size modifier, with the exception of is-full, is-12 and is-shrink.

is-offset-one-fifth
Auto
is-offset-3
Auto
is-offset-one-third
Auto
is-offset-half
Auto
<div class="grid">
  <div class="column is-one-fifth is-offset-one-fifth">
    is-offset-one-fifth
  </div>
  ...
</div>
<div class="grid">
  <div class="column is-3 is-offset-3">
    is-offset-3
  </div>
  ...
</div>
<div class="grid">
  <div class="column is-one-third is-offset-one-third">
    is-offset-3
  </div>
  ...
</div>
<div class="grid">
  <div class="column is-3 is-offset-half">
    is-offset-half
  </div>
  ...
</div>
Copy

Alignment

These flexbox powered modifiers will allow you to control the alignment of your columns.

Some of these modifiers are not specific to the Grid module and can be found within the OrbitCSS global modifiers.


Center alignment

With the has-centered modifier, columns will position in the center of the grid and spread outwards.

I'm center aligned!
<div class="grid has-centered">
  <div class="column is-half">
    I'm center aligned!
  </div>
</div>
Copy

Right alignment

The has-end modifier will align contents from right to left.

I'm right aligned!
<div class="grid has-end">
  <div class="column is-half">
    I'm right aligned!
  </div>
</div>
Copy

Equal spacing

The has-spacing modifier can be used to equally distribute the rows remaining space in between each of the columns.

is-3
is-3
is-3
<div class="grid has-spacing">
  <div class="column is-3">
    is-3
  </div>
  <div class="column is-3">
    is-3
  </div>
  <div class="column is-3">
    is-3
  </div>
</div>
Copy

Individual column alignment

The is-center and is-end modifiers exists for the purpose of aligning individual columns.

is-center
<div class="grid">
  <div class="column is-half is-center">
    is-center
  </div>
</div>
Copy

is-end
<div class="grid">
  <div class="column is-half is-end">
    is-end
  </div>
</div>
Copy

olumns positioned after an individually aligned column will also be impacted by that columns alignment. For example; if a column is right aligned using is-end any column positioned after it will also move from a right-to-left direction.



Flexible height

You'll find that columns within a row will all share the same height. For example; if one column has content that is higher than the other, the later will grow to match the height. This behavior can be overridden by using the is-flex-start modifier on your grid block.

I'm a small column with a single line of text
I'm a bigger column with the same line of text

plus an extra line here
<div class="grid is-flex-start">
  <div class="column">
    I'm a small column with a single line of text
  </div>
  <div class="column">
    I'm a bigger column with the same line of text<br><br>
    plus an extra line here
  </div>
</div>
Copy

Vertical columns

Sometimes you will want the flexibility to specify column width without the horizontal stacking of columns. When the is-vertical modifier is applied to your grid block columns will no longer wrap.

is-one-quarter
is-half
<div class="grid is-vertical">
  <div class="column is-one-quarter">
    is-one-quarter
  </div>
  <div class="column is-half">
    is-half
  </div>
</div>
Copy

Gutters

By default, columns have predefined gutters which can be overridden with the $col-padding variable. Additionally, there are two modifiers that will enable you to quickly increase or remove the gutters.

The has-row-margin modifier will add a margin to the top and bottom of each column, pushing out the space between each row.

<div class="grid has-row-margin">
  <div class="column is-half"></div>
  <div class="column is-half"></div>
  <div class="column is-half"></div>
  <div class="column is-half"></div>
</div>
Copy

The has-no-col-padding modifier will remove the gutters from each of the columns.


<div class="grid has-no-col-padding">
  <div class="column is-half"></div>
  <div class="column is-half"></div>
  <div class="column is-half"></div>
  <div class="column is-half"></div>
</div>
Copy

Responsiveness

On mobile viewports, the columns will always take up 100% width, regardless of what size modifiers are present. To work around this, you can specify an additional modifier on the column element by adding mobile before the size. For example; to display a column at half-width you would use is-mobile-half.

I am half-width on all devices!
<div class="grid">
  <div class="column is-half is-mobile-half">
    I am half-width on all devices!
  </div>
</div>
Copy

As the standard size modifiers apply to medium viewports (tablet devices) and greater, you may find that sometimes your columns are too big on larger viewports such as desktops. Cater for this by appending desktop and desktop-x to the size and specifying an alternative size for these specific viewports.

is-10 is-desktop-8 is-desktop-x-6
<div class="grid">
  <div class="column is-10 is-desktop-8 is-desktop-x-6">
    is-10 is-desktop-8 is-desktop-x-6
  </div>
</div>
Copy

These modifiers will give you the flexibility to control the column width on 4 different viewports:

  • Small (< 768px) - Mobile devices
  • Medium (+768px) - Tablet devices
  • Large (+922px) - Most laptops
  • Extra large (+1200px) - Most desktops

The is-{size}-auto modifier will replicate the standard column functionality on the specific viewport. For example you can use is-mobile-auto if you don't want column to take up 100% width on mobile. Additionally, the is-{size}-shrink modifier can be to force shrinking on the specific viewport.


Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$col-paddingunits0.625rem
$col-margin-topunits0.5rem
$col-margin-bottomunits0.5rem
$max-colsinteger12
$grid-sizeslist'one-quarter' 25%,
'half' 50%,
'three-quarters' 75%,
'one-third' 33.333333%,
'two-thirds' 66.666666%,
'full' 100%,
'one-fifth' 20%,
'two-fifths' 40%,
'three-fifths' 60%
'four-fifths' 80%