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>
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>
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
Any column that cannot claim its predefined share of the space will wrap, creating rows within the grid.
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%
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>
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.
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.
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>
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.
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>
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>
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>
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>
<div class="grid">
<div class="column is-half is-end">
is-end
</div>
</div>
Columns 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.
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.
<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>
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>
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>
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>
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>
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>
Mobile, desktop, and desktop-x can also be applied to offset columns.
<div class="grid">
<div class="column is-10 is-offset-1 is-desktop-8 is-offset-desktop-2">
is-10 is-offset-1 is-desktop-8 is-offset-desktop-2
</div>
</div>
These modifiers will give you the flexibility to control the column width on 4 different viewports:
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.
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
Variable | Type | Default Value |
---|---|---|
$col-padding | units | 0.625rem |
$col-margin-top | units | 0.5rem |
$col-margin-bottom | units | 0.5rem |
$max-cols | integer | 12 |
$grid-sizes | list | '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% |