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.
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.
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 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 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.
is
the
Tallest
Layout
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.
is
the
Tallest
Layout
Medium
Layout
is
the
Tallest
Layout
Medium
Layout
is
the
Tallest
Layout
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.
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.