Inline Block Grid Usage Examples

Push and Pull

Push and pull let you displace the natural position of a column, often used to manipulate column order. In the following example, notice that Column 1 and Column 2 switch places at various breakpoints.

Note that you can reset pushes and pulls from lower breakpoints by using a pull0of12 or push0of12 (prefixed with the intended breakpoint).

size6of12 
med_push6of12
xl_push0of12

COLUMN 1

size6of12 
med_pull6of12
xl_pull0of12

COLUMN 2

Prefix and Suffix

Prefix and suffix let you add empty columns before or after a given column.

Note that you can reset prefixes and suffixes from lower breakpoints by using a prefix0of12 or suffix0of12 (prefixed with the intended breakpoint).

size6of12 
prefix3of12
lg_prefix0of12
size3of12 
lg_size6of12

Nesting

size12of12 
med_size6of12 
lg_size4of12 
xl_size3of12

size12of12 
med_size6of12 
lg_size4of12 
xl_size3of12

These two columns are nested

size6of12
xl_size12of12

size6of12
xl_size12of12

size12of12 
med_size12of12 
lg_size4of12 
xl_size3of12

Horizontal Alignment

Center or right align a row of columns by applying the appropriate class to the "grid" element (default is to align left).

Aligning right or center aligns the columns within the grid element, not the content within the column. Note that if the total number of columns defined adds up to 12, no centering takes place — leverage centering by defining less than 12 columns to be used in the grid. In the following example, at the "med" breakpoint, all 12 columns are defined, and the columns fill the entire space as expected.

Align Center

<div class="grid grid_align_center">
    <div class="column size1of12 med_size3of12 lg_size2of12">
    <div class="column size6of12">
    <div class="column size2of12 med_size3of12 lg_size2of12">

Mocha, con panna et id seasonal, cortado, rich, turkish bar whipped mug viennese. Coffee, caramelization viennese crema variety breve lungo americano strong.

Align Right

<div class="grid grid_align_right">
    <div class="column size2of12">
    <div class="column size6of12">
    <div class="column size2of12">

Mocha, con panna et id seasonal, cortado, rich, turkish bar whipped mug viennese. Coffee, caramelization viennese crema variety breve lungo americano strong.

Vertical Alignment

Vertically align a row of columns by applying the appropriate classes to the '.grid' element. Default is to align at the top. Because the grid "columns" are inline block, vertical alignment is natural. In CSS, vertical alignment aligns inline elements within their parent element (ie. they are aligned in relation to each other).

Align Middle

<div class="grid grid_valign_middle">
    <div class="column size2of12">
    <div class="column size6of12">
    <div class="column size2of12">

Mocha, con panna et id seasonal, cortado, rich, turkish bar whipped mug viennese. Coffee, caramelization viennese crema variety breve lungo americano strong.

Align Bottom

<div class="grid grid_valign_bottom">
    <div class="column size2of12">
    <div class="column size6of12">
    <div class="column size2of12">

Mocha, con panna et id seasonal, cortado, rich, turkish bar whipped mug viennese. Coffee, caramelization viennese crema variety breve lungo americano strong.

Align Center (horizontal) and align middle (vertical)

<div class="grid grid_valign_middle grid_align_center">
    <div class="column size2of12">
    <div class="column size6of12">
    <div class="column size2of12">

Mocha, con panna et id seasonal, cortado, rich, turkish bar whipped mug viennese. Coffee, caramelization viennese crema variety breve lungo americano strong.

Full Width Columns

Add a class of 'full_width' to a column (optionally prefixed with a standard breakpoint) to let a column push out to the full width established by the 'container' element which is the parent of the column in question.

The following example shows a column that stays full width up through the 'med' breakpoint, and takes on a width of 50% (lg_size6of12) at the large breakpoint. A regular full width column is directly below to contrast the effect. The container background is light yellow.

NOTE: A full width column utilizes padding that is greater than a normal column to maintain normal full outer gutters. If you want a column that is full browser width AND has no padding, utilize the 'clear_padding' class detailed in the next section.

NOTE: In desktop Chrome (as of version 36) and Internet Explorer (as of version 11), the full width column will extend underneath the vertical scrollbar and trigger a horizontal scrollbar. This is the way these browsers handle the '100vw' width declaration (100% viewport width) used in the 'full_width' column style.

<div class="grid">
    <div class="column med_full_width lg_size6of12"></div>
    <div class="column size12of12"></div>
</div>

This column stays full width through the 'med' breakpoint.

This column is a normal 100% width column.

Full Width Columns

Add a class of 'full_width' to a grid (optionally prefixed with a standard breakpoint) to let a column push out to the full width established by the 'container' element which is the parent of the column in question.

The following example shows a column that stays full width up through the 'med' breakpoint, and takes on a width of 50% (lg_size6of12) at the large breakpoint. A regular full width column is directly below to contrast the effect. The container background is light yellow.

NOTE: A full width column utilizes padding that is greater than a normal column to maintain normal full outer gutters. If you want a column that is full browser width AND has no padding, utilize the 'clear_padding' class detailed in the next section.

<div class="grid med_full_width">
    <div class="column lg_size6of12"></div>
</div>
<div class="grid">
    <div class="column size12of12"></div>
</div>

This column stays full width through the 'med' breakpoint.

This column is a normal 100% width column.

Removing Padding from a Column

The class 'clear_padding' (or 'clear_padding_left' and/or 'clear_padding_right') are used to remove the padding from a column, which may be useful for certain effects.

The 'clear_padding' effect can be restricted to a certain breakpoint by overriding it with the 'restore_padding' class at a larger breakpoint.

<div class="grid">
    <div class="column size10of12"></div>
    <div class="column sm_clear_padding lg_restore_padding size10of12"></div>
    <div class="column size10of12"></div>
</div>

A normal size 10 of 12 column.

A column whose padding is cleared at the 'sm' breakpoint, and then restored at the 'lg' breakpoint.

A normal size 10 of 12 column.

Width Test

The two areas below should match in width. The top area is a 100% width single column. The second area is 12 individual 1/12th columns — these should visually take up the exact same amount of horizontal space.