(800) 338-3884
Request A Demo
Back to index

Grid samples

Default

Default widths set the grid for desktop browsers. By default, grid items display full width on mobile.

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

Additional classes for mobile columns

"@m" classes allow muti-column layouts on mobile. Resize the browser to compare the difference between this section and the section above.

width-12/12 width-12/12@m
width-1/12 width-1/12@m
width-11/12 width-11/12@m
width-2/12 width-2/12@m
width-10/12 width-10/12@m
width-3/12 width-3/12@m
width-9/12 width-9/12@m
width-4/12 width-4/12@m
width-8/12 width-8/12@m
width-5/12 width-5/12@m
width-7/12 width-7/12@m
width-6/12 width-6/12@m
width-6/12 width-6/12@m

Alignment within grid columns

To vertically center all items within the grid, add "grid-valign-center" to the grid element

It was a dark and stormy night. The quick brown fox jumped over the lazy dog.

Hello

To allow all grid items to use their natural height (and not stretch), add "grid-valign-top" to the grid element

It was a dark and stormy night. The quick brown fox jumped over the lazy dog.

Hello

Vertical alignment of individual grid columns ("grid-item"):

"grid-item-valign-center" centers the content of a single> item within the grid:

It was a dark and stormy night. The quick brown fox jumped over the lazy dog. Every good boy does fine.

Top aligned (default)

Example

"grid-item-valign-center" with "grid-item-stretch" extends the height and vertically centers the content:

It was a dark and stormy night. The quick brown fox jumped over the lazy dog. Every good boy does fine.

Not centered (default)

Example

Default grid with no special classes on grid-items:

It was a dark and stormy night. The quick brown fox jumped over the lazy dog. Every good boy does fine.

Example

Example

Facebook logo icon Twitter logo icon linkedin logo icon Youtube logo icon