Create powerful multi-device CMS Pages quickly and easily with the default 12-column grid included on Intenso: Foundation 5. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.
Basic
Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.
Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
Example:
// 3 stacked columns on mobile, one main column with two sidebars on medium and large screens <div class="row"> <div class="small-12 medium-3 columns">Left sidebar</div> <div class="small-12 medium-6 columns">Main column</div> <div class="small-12 medium-3 columns">Right sidebar</div> </div>
For more information, please visit Foundation's website.