The Basics
Foundation sizes columns differently than what you may be used to. Each Foundation column stack is divided into 12 units. You then assign how many of these units each column is allowed to fill. If the total of all column units in a stack is less than or equal to 12, then all of the columns will reside in a single row on the webpage. However, if the total number of units for all of the columns exceeds 12, then the columns will break into multiple rows.
Example
1
2
3
4
5
6
7
8
9
10
11
12
Let's examine the first example above that uses the Foundation 3 Column stack. The first column is set to fill 12 units on mobile and 6 units on tablet and above. The last 2 columns are set to fill 6 units on mobile and 3 units on tablet and above.
Therefore, on tablet and desktop devices, all 3 columns will exist in a single row because the total of the units equals 12 (6+3+3=12). Now on a mobile device, the 3 columns will split into 2 rows. The first column will fill the entire 12 units on the top row. Then columns 2 and 3 will be below it. Each of them will fill up 6 units.
Offset
Foundation allows you to offset your content by up to 11 units to the right. You can even customize the offsets for each device. This allows you to make your layouts look exactly how you want on all devices.
Example
1
2
3
4
5
6
7
8
9
10
11
12
Equalize Height
There are always times where you will want to make sure that the height of your columns are the same regardless of their content. All of the Foundation column stacks support this. They also can work in conjunction with the Panel and Price Table stacks to ensure the containers all have the same height.
Example
1
2
3
4
5
6
7
8
9
10
11
12
Some Text Gluten-free paleo gastropub authentic.
More Text Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park.
Even More Text Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO.
Centering
All centering of columns can be accomplished using the Foundation 1 Column stack. What is great is that you can even center your content based on the device. This means that you can center content on a desktop device and align left on mobile devices.
Example
1
2
3
4
5
6
7
8
9
10
11
12
Source Ordering
Using source ordering in Foundation, you can shift columns around between breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. This is somewhat similar to Offset. However, you can both push columns to the right or pull content to the left. And all at different breakpoints.
Example
1
2
3
4
5
6
7
8
9
10
11
12
Tablet 5, Push 1
Desktop 4, Push 2
Tablet 5, Pull 1
Desktop 4, Pull 2
Edge-to-Edge
All of the Foundation column stacks respect the max-width setting in Site Styles. This means that the content in the columns will never grow wider then what is set in the max-width setting. However, if you simply don't place your content inside of a Foundation column stack, it will go edge-to-edge.