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.

<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.

<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%

<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.

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%

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.

<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.

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.

<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.

Center alignment

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

<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.

<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.

<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.

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

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

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.

Standard behavior

With flexible height

<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.

<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.

<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.

<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

CSS variables

You can set the default styling for all columns on the grid block at the top level.

.grid {
  --col-padding: 0.625rem;
  --col-margin-top: 0.5rem;
  --col-margin-bottom: 0.5rem;
  --col-width: 100%;
}
Copy

Additionally, you can override individual columns.

.column.custom-column {
  --margin: var(--col-margin-top) 0 var(--col-margin-bottom) 0;
  --padding: var(--col-padding);
  --width: var(--col-width);
}
Copy

If you want to add new sizes using CSS variables, you'll need to specify the size and update the --width variable.

.column.is-one-eighth {
  --width: 12.5%;
}
Copy

Sass variables

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