2018.1

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="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526) and type the class in the Class
field on the Attributes pane.
To add Grid rows and columns quickly, you could also use the Grid snippets or Row snippets,
found in the Snippets folder on the Resources pane after using a wizard to create a
Foundation web page or a Capture OnTheGo template. For more information about Snippets,
see "Snippets" on page611. For more information about template wizards, see "Creating a
Web template with a Wizard" on page438 and "Capture OnTheGo template wizards" on
page473.
Page 479