2022.1

Table Of Contents

The Grid

Use the Grid to ensure the responsiveness of a form. Using the Grid essentially means building

a form or web page with Div elements (a Div is a container element, see "Div" on page733)

that have the following classes:

l row: This class identifies a Div as a horizontal block (a row) that can contain up to 12

columns.

l columns: This class should be used for a Div inside a Div with the class row. It identifies

a Div as part of a row Div.

l small-n, medium-n, large-n: These classes indicate the number of columns that this Div

occupies within in the row, on a small, medium or large screen, respectively. Replace n

with a number, for example: small-2, large-4. If the numbers declared in one 'row' for one

screen size, added together, exceed the maximum of 12, they don't fit in one row on that

screen size. In that case the Div elements will appear below each other instead of next to

each other.

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>

Page 618