Foundation 5 - Basic Grid

<div class="row"> <div class="small-2 large-4 columns">...</div> <div class="small-4 large-4 columns">...</div> <div class="small-6 large-4 columns">...</div> </div> <div class="row"> <div class="large-3 columns">...</div> <div class="large-6 columns">...</div> <div class="large-3 columns">...</div> </div> <div class="row"> <div class="small-6 large-2 columns">...</div> <div class="small-6 large-8 columns">...</div> <div class="small-12 large-2 columns">...</div> </div> <div class="row"> <div class="small-3 columns">...</div> <div class="small-9 columns">...</div> </div> <div class="row"> <div class="large-4 columns">...</div> <div class="large-8 columns">...</div> </div> <div class="row"> <div class="small-6 large-5 columns">...</div> <div class="small-6 large-7 columns">...</div> </div> <div class="row"> <div class="large-6 columns">...</div> <div class="large-6 columns">...</div> </div>
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.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.