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.


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.


// 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>

For more information, please visit Foundation's website.