Columns

Base Foundry stack

Allows you to create nice looking, columnized layouts and ensures that your content will look great on both desktop and mobile devices.

  • Choose from 1 to 4 column layouts
  • Equal-width or custom width column sizes
  • Choose to include or remove gutters
  • Configure custom gutter widths
  • Offset columns
  • Adjust column sizes for each breakpoint
  • Push or pull columns for ordering at each breakpoint
  • Make all columns within the stack the same height
  • Opt to have content centered vertically when using Equal Height columns
  • Set background colors for columns when using Equal Height columns

Example

One Column

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.

Two Columns

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.

Two Columns

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.

Three Columns

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.

Three Columns

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.

Three Columns

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.

Four Columns

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.

Four Columns

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.

Four Columns

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.

Four Columns

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.

Columns of different sizes

Column One
Header

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.

Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam.

Column Two
Header

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

Reordered columns

Column One
Header

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

Column Two
Header

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

Column Three
Header

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


Using Columns

General

Columns
Choose the number of columns that is right for your particular layout. You can choose to use 1 to 4 columns.

Remove Gutters
Enabling the Remove Gutters option eliminates the spacing between your columns. This is not an option that will be used often, but it can provide for unique designs.

Custom Gutter Width v2
Alloy you to set a custom gutter width at each of the three different responsive breakpoints.

Customize Columns
This feature enabled a bevy of options for your columns at each of the 3 breakpoints in Foundry (Mobile, Tablet and Desktop).


Mobile Custom Columns

The following options are available to you when you enable the Customize Columns feature in the General section of the Columns stack’s settings.

Column Widths
You can set the width of each of the 4 columns individually using Foundry’s units measurement (see Units Measurement below for more information). The widths set in this section will be applied at the Mobile breakpoint. A column’s width can be set between 1 and 12 units wide.


Tablet Custom Columns

The following options are available to you when you enable the Customize Columns feature in the General section of the Columns stack’s settings.

Column Widths
You can set the width of each of the 4 columns individually using Foundry’s units measurement (see Units Measurement below for more information). The widths set in this section will be applied at the Tablet breakpoint. A column’s width can be set between 1 and 12 units wide.

Alignment
For each of the four columns you can customize the way it is displayed. You can choose for the column to the offset or re-ordered. We define Offset and Ordering below in the Offset & Ordering section. These settings will be applied to the columns respectively at the Tablet breakpoint.

Offset Value
This is the number of units that the column will be indented in that particular Columns stack.

Ordering
Choose the method used on each individual column, at the Tablet breakpoint, for which that column will be pushed or pulled.

Ordering Value
This is the number of units that the column will be pushed, or pulled, depending on your Ordering setting for a particular column.


Desktop Custom Columns

The following options are available to you when you enable the Customize Columns feature in the General section of the Columns stack’s settings.

Column Widths
You can set the width of each of the 4 columns individually using Foundry’s units measurement (see Units Measurement below for more information). The widths set in this section will be applied at the Desktop breakpoint. A column’s width can be set between 1 and 12 units wide.

Alignment
For each of the four columns you can customize the way it is displayed. You can choose for the column to the offset or re-ordered. We define Offset and Ordering below in the Offset & Ordering section. These settings will be applied to the columns respectively at the Desktop breakpoint.

Offset Value
This is the number of units that the column will be indented in that particular Columns stack.

Ordering
Choose the method used on each individual column, at the Desktop breakpoint, for which that column will be pushed or pulled.

Ordering Value
This is the number of units that the column will be pushed, or pulled, depending on your Ordering setting for a particular column.


Columns Base Margins

Mobile, Tablet & Desktop
Set the margins, that are applied to the bottom of all columns. You can set a different base margin for each breakpoint to adjust your spacing below the columns depending on the browser width or device type.


Advanced

Equal Height Columns
Forces the entire row of columns to be the same height as the tallest column in the stack. When enabled you’re also given the option of setting a colored background for each of the four columns in the stack.

Vertically Center Contents
Places all content within each column into the vertical center of its column. The outer height of the columns is based on the Equal Height columns feature, which makes all columns the same height as the tallest column in the stack.

Background Colors
When using equally height columns you can set a background color for each of the 4 columns, independent of one another.

  • Please Note: Both the Equal Height and Vertical Centering features revert to normal content at the Mobile breakpoint.

Reference

Units Measurement

Column widths in Foundry are defined in "units." Each row of columns consists of 12 flexible units. If you had a row that consisted of 2 columns for instance, and each column was equal in width then each column would be 6 units, or half of 12.

The Customize Columns feature of the Columns stack allows you to adjust your column widths, setting them between 1 and 12 units wide.

Offset & Ordering

Offset is the amount, in units (see above), that a column will be indented in a row. This allows for unique layouts with your columns.

Ordering is similar to offsets, but is even more advanced. It can be used to both push and pull columns. You insert your content in the order you wish it to appear at the Mobile breakpoint, then you push and or pull your columns around to set them up where you wish them to display at the Tablet or Desktop breakpoints. This way they can appear one was at the larger breakpoints, but will revert to their original ordering at the Mobile breakpoint.

  • Please Note: Both of these options are definitely in the camp of advanced layout techniques.
Insight
Colored Backgrounds

When using the Equal Height Columns feature of the Columns stack, you can choose to set background colors for each individual column.