Dynamic Layouts

Page layouts are useful to house our content with a series of rows and columns.Here's how the toolkit layout work:

• Rows must be places with in a .wrapper container for proper alignment and padding.
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows.
• Predefined classes like .grid-3up, .grid-4up are available for quickly making responsive layouts.
• The class .exploit is used to make dynamic layouts
• Try removing and adding columns and you'll see you will not have any empty space.

Examples

Main-Aside

<div class='wrapper'><div class='demo'><div class='l-main exploit'></div><div class='l-aside'></div></div></div>

Columns based on Content

<div class='wrapper'><div class='demo'><div class='l-main exploit'></div><div class='l-aside'></div></div></div>

Two Up

<div class='wrapper'><div class='demo grid-2up exploit'><div class='grid-item'></div><div class='grid-item'></div></div></div>

Three Up