Grid

Create powerful multi-device layouts quickly and easily with the default 12-column. You can read here full documentation about Foundation grid system.

Start by adding an element LSQBrow] element. This will create a horizontal block to contain vertical columns. You can add to ‘row’ elements your custom class, e.g. LSQBrow class="your_custom_class"] Then add elements LSQBcolumns class=""] with an appropriate class name. Specify the widths of each column with the large-#, medium-# and small-# classes.

2 Columns Grid

medium-6
medium-6
medium-8
medium-4
medium-4
medium-8

LSQBrow] LSQBcolumns class="medium-8"] medium-8 LSQB/columns]LSQBcolumns class="medium-4"] medium-4 LSQB/columns] LSQB/row]


Note, when you forming a grid, you should “wrap” grid elements into LSQBrow] shortcode

3 Columns Grid

medium-4
medium-4
medium-4
medium-6
medium-3
medium-3
medium-3
medium-6
medium-3
medium-3
medium-3
medium-6

LSQBrow] LSQBcolumns class="medium-6"] medium-6 LSQB/columns]LSQBcolumns class="medium-3"] medium-3 LSQB/columns]LSQBcolumns class="medium-3"] medium-3 LSQB/columns] LSQB/row]


Multiple columns used to simplify the content forming by inserting the most common variants of the grid.

4 Columns Grid

small-6 medium-3
small-6 medium-3
small-6 medium-3
small-6 medium-3

LSQBrow] LSQBcolumns class="small-6 medium-3"] small-6 medium-3 LSQB/columns]LSQBcolumns class="small-6 medium-3"] small-6 medium-3 LSQB/columns]LSQBcolumns class="small-6 medium-3"] small-6 medium-3 LSQB/columns]LSQBcolumns class="small-6 medium-3"] small-6 medium-3 LSQB/columns] LSQB/row]


Note, code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>