Column Layouts
How to create different layouts using columns.
Options other than Column Container
- To create text that flows across 2-columns, refer to Flow Text Between Columns.
- To repeat numerous cells of the same size (such as a list of cards or callouts), use a Block Grid instead of a Column Container.
Predefined Column Container Options
Note: When using the landing page template, column containers should be added inside a content band.
1-Column Option
- There is no "1-column" specific option, but you can easily create one using the 2 column option, and stacking the columns at all breakpoints so that the first column is full width. Then just omit the 2nd column of content.
1 Column (stacked at all breakpoints). 2nd Column omitted.
2-Column Predefined Options (breakdown of 12 col grid)
- Stacked (12/12)
- 25% - 75% (3/12 and 9/12)
- 33% - 66% (4/12 and 8/12)
- 50% - 50% (6/12 each)
- 66% - 33% (8/12 and 4/12)
- 75% - 25% (9/12 and 3/12)
Cell (stacked) with no bottom margin.
cell (stacked)
cell set to 25%
cell set to 75%
cell set to 33%
cell set to 66%
cell set to 50%
cell set to 50%
cell set to 66%
cell set to 33%
cell set to 75%
cell set to 25%
3-Column Predefined Options (breakdown of 12 col grid)
- Stacked (12/12)
- 33% - 33% - 33% (4/12 each)
Cell (stacked) with no bottom margin.
Cell (stacked) with no bottom margin.
Cell (stacked)
Cell set to 33%
Cell set to 33%
Cell set to 33%
4-Column Predefined Options (breakdown of 12 col grid)
- Stacked (12/12)
- 50%, 50%, 50%, 50% (6/12 each, wrapping to 2 rows)
- 25%, 25%, 25%, 25% (3/12 each)
Cell (stacked) with no bottom margin.
Cell (stacked) with no bottom margin.
Cell (stacked) with no bottom margin.
Cell (stacked).
Cell set to 50%.
Cell set to 50%.
Cell set to 50%.
Cell set to 50%.
Cell set to 50% for small and medium, 25% for large.
Cell set to 50% for small and medium, 25% for large.
Cell set to 50% for small and medium, 25% for large.
Cell set to 50% for small and medium, 25% for large.
Cells with Alternate Sizes
The column component template also includes a "custom classes" section where you can define other columns sizes. Basically make sure your values add up to 12, such as splitting 5/7 or 5/2/5 or 3/6/3, etc.
cell with .medium-6 and .large-7
cell with .medium-6 and .large-5
cell with .small-5
cell with .small-2
cell with .small-5
cell with .small-3
cell with .small-6
cell with .small-3
Cell Auto-Sizing (Shrink/Expand)
If the class .auto or .[size]-auto is added to the cell, it will take up the remaining space. Multiple expanding cells will share the leftover space equally.
A cell can also be made to shrink, by adding the .shrink or .[size]-shrink class. This means it will only take up the space its contents need.
cell using .small-3 is 25% of width
cell using .auto takes up whatever space is left.
cell using .large-auto takes up whatever space is left at large breakpoint.
cell using .large-3 is 25% of width at large breakpoint
cell using .small-3 is 25% of width
cells using .auto divide up whatever space is left.
cells using .auto divide up whatever space is left.
cell with .shrink
cell with .auto
cell using .small-3 is 25% of width
cell using .shrink
cell using .auto
Cell Offsets
Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.
cell using .small-4 and .large-offset-2
cell using .small-4
cell with .medium-7 .medium-offset-5
Cell Centering
Center your column by adding a class of .small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a .large-centered class. To uncenter on large screens, use .large-uncentered.
cell with .large-9 .large-centered
Visually Re-Ordering Cells
Warning: Do not rearrange Source order for content that users need to click on. Users who rely on keyboard navigation or screen readers may find it confusing for focus to jump forward and then backwards to accommodate the re-ordering.
Cell re-ordering exists for situations where you want a stacked layout for mobile, where an image is above/below some content, but at desktop, you want the image to display to the right/left of the content.
The .[size]-order-[position] class lets you tell content to visually swap positions.
cell using .large-6 .small-order-1 .large-order-2 to display this text box above the image at mobile and to the right of the image at the large breakpoint.
The cell containing the image uses the opposite order, .large-6 .small-order-2 .large-order-1.
This cell is using .large-5 .small-order-2 .large-order-1 to make this this text box display below the video at mobile and to the left of the video at the large breakpoint.
The cell containing the video image uses the opposite order, .large-7 .small-order-1 .large-order-2.
The video could have been used in place of the image in either column.