2020.2

Table Of Contents

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

columns.

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.

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>

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.

Page 566