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.

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.

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%

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.

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 .

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.

Right alignment

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

Equal spacing

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

Individual column alignment

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

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.

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.

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.

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

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 .

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.

Mobile, desktop, and desktop-x can also be applied to offset columns.

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

Variables

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