Columns

The Column Layouts in Foundation 6 are very flexible. At their core, they are based on a 12 unit grid system. The total of the units a layout will take up is 12. For example, if you want a 2 column layout, you would size each column to use 6 units. For a 3 column, you would assign 4 units. You can add as many columns as you would like. Columns can be nested too! You can also break away from the paradigm and have columns be fixed size or shrink to their content.

On top of that you are also define different sizes for small/medium/large size screens for even more flexibility. If you look at the examples below you will see numbers listed as the sm/md/lg sizes labeled inside of their respective columns.

Hover over layouts below for sizing hints.

6
6
12 / 6 / 8
12 / 6 / 4
6 / 4 / 4
6 / 4 / 4
hidden / 4 / 4
4 + Gutters
4 + Gutters
4 + Gutters
100px
Expand to Fill
100px
Shrink to Content
Expand to Fill

Block Grid

The Blog Grid allows you to easily layout many elements into a evenly spaced grid. You can scale these by defining how many elements wide will be placed on small/medium/large screens. In the below example, the grid will go from 3 elements wide on small mobile devices, to 4 on medium and 5 on large desktop devices.

Visibility

All of the Foundation 6 layout stacks have a unified system for controlling the visibility of content within your layout. You have the ability to show or hide content based on numerous criteria.

  • Device size - small (up to 640px), medium (up to1024px), large (above 1024px)
  • OS Light/Dark Mode
  • Internet Explorer
  • Portrait/Landscape mode
  • Screen Readers
  • Printing

The first cell in the below demo will display the breakpoint that you are currently on. You will see other cells show or hide based on configured rules.

Showing Small
Showing Medium
Showing Large
Hide for Small
Hide for Large
Hide for Medium
Show for Medium+
Hide for Medium+
Show for Dark Mode

Sticky

Having the ability to make your content sticky adds a very interesting dynamic to your layouts. The most common use case for this is making menus stick to the top of a browser window once a menu reaches the top. While this can be done, below are a couple examples of how we can use Sticky within the layouts within our pages.

Sticky to the Bottom

Sticky to Bottom

As you scroll down you will see that the sticky container to the left keeps inline with the bottom of this container. Once it has reached the bottom of this column, it will remain stuck at the bottom.

You can make whatever you want sticky. Images work really well for this as well. This can allow you to display a relevant image alongside an entire passage of text. Once that passage has ended, the image can scroll up with it.

I am going to add one more paragraph here just so you can see the sticky behavior last just a little bit longer.

Sticky to the Top

Sticky at Top

So this example behaves a bit more like you are expected to when using this with menus. When this layout reaches the top of the browser, it will become stuck to the browser.

Since this sticky demo is tied to the layout itself, it will become unstuck once the layout scrolls out of the viewport.

Sticky layouts are very flexible. They are be stuck and unstuck based on the browser, layout or specific anchors added to the page.

Equalized Heights

By default all column and grid layouts will equalize their heights to the tallest column. Will ensure that your layouts will look symetrical no matter how much content is inside of them.

Short Layout
This
is
the
Tallest
Layout
A
Medium
Layout

Vertical Alignments

Foundation 6 layouts also allow you to flexibility to define how columns and grids are aligned vertically when you do not want heights to be equalized.

Top Alignment
This
is
the
Tallest
Layout
A
Medium
Layout

Middle Alignment
This
is
the
Tallest
Layout
A
Medium
Layout

Bottom Alignment
This
is
the
Tallest
Layout
A
Medium
Layout

Source Order

Source ordering allows you to adjust the order of columns based on screen sizes. in the below demo you will notice that the columns will change their order based on the screen size. The second demo is a real world example on why this feature can be important.

1
2
3

Pretend that
this is a
Stunning Image

Real World Example

In the example, on small and medium devices, the image will be above this text. On large screens, the image will be in the right hand column.

Source ordering makes this possible. Traditionally, items that are inside of a right column will be below the contents on the left column when viewed on smaller screens.

Overlapping Columns

The magic that makes this all happen is a negative left margin added to the 2nd column. In this example, a utility class was added to the 2nd column. However, a swatch could easily be used for this as well.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dividers

Dividers can be used to add accents between content. Below are a few examples. The second example shows how you can use dividers between your column layouts. You can style the heck out of dividers with swatches (style, size, color, etc).




This is some content inside of the columns for our divider demo.

This is some content inside of the columns for our divider demo.

This is some content inside of the columns for our divider demo.

Vertical Grid

Just like columns can divide a layout into columns by width, the Vertical Grid allows you to divide a layout vertical into sections as well. Below are a couple of example where the layouts can be divided into sections using the same 12 unit scale that we use in Columns.

Video Tutorials

Below are video tutorials that are relevant to the stacks used on this page.

Loading...