1.7

Table Of Contents

These classes can be combined, so that depending on the screen size, a Div can take

more or less space in a row. Separate the class names with a space.

Tip

Start with the class for small screens. For example: <div class="small-3 large-6" columns>. Larger

devices will inherit those styles (thanks to the mobile-first approach of Foundation's style sheet).

Customize for larger screens as necessary.

Example

This very simple layout has only one row:

<div class="small-2 large-4 columns">Content goes

here</div>

<div class="small-4 large-4 columns">Content goes

here</div>

<div class="small-6 large-4 columns">Content goes

here</div>

</div>

The Div elements inside the row take up 2, 4 and 6 parts of the total amount of screen size

(divided in 12 parts) on a small screen. On a large screen they each take one third of the

available space. If the class large-4 would have been left out, the Divs would take up 2, 4 and

6 parts of the available space, regardless of the screen size.

There's more that you can do with the Grid, for example, you could center columns, or switch

columns depending on the screen size they are viewed on. For information about all these

possibilities, see this website:

http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html.

Adding Divs and classes to a Connect Form template

To insert a Div, select Insert > Structural Elements > Div on the menu. To add a class to the

Div, select the Div (see "Selecting an element" on page411) and type the class in the Class

field on the Attributes pane.

Page 391