The Grid

Prototypes are essential when working on a team. Quickly build fully functional Foundation sites without writing a single line of code.

My Image

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

Mobile 12, Tablet 6
Mobile 6, Tablet 3
Mobile 6, Tablet 3
Mobile 6, Tablet 7, Desktop 8
Mobile 6, Tablet 5, Desktop 4

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

Content is offset by 2 units.
Content is offset by 4 units.
Content is offset by 6 units.

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

My Image
Centered on Desktop
Aligned Left on Mobile

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

Mobile 6
Tablet 5, Push 1
Desktop 4, Push 2
Mobile 6
Tablet 5, Pull 1
Desktop 4, Pull 2
Mobile 12, Tablet 6
Compare the break order with the below 2 Column
Mobile 12, Tablet 6 + Push 6 (break order flipped)
Mobile 12, Tablet 6 + Pull 6

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.


Product by Joe Workman

I am an indie Web and Mac developer based in the SF Bay Area. I've been highly active in the community since my first release in 2008. http://joeworkman.net

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.