Html/css: Foundation Stylesheet Wont Link

I am trying to get the foundation framework to link to my HTML page but when I try to use the grid system it does not do anything. I have been looked at a few different tutorials t

Solution 1:

First of all, you have a typo, it says collumn, should be column (or columns).

Second, please make sure you're using the proper grid, Foundation 6.4 has 3 grids available: XY (default), Float and Flex.

The code in your sample belongs to the "traditional" Float Grid, while the default grid in this new version (since June 27th) is XY Grid. So you have two options:

1. Change your markup according to the new XY grid (take a look to http://foundation.zurb.com/sites/docs/xy-grid.html )
2. Change the framework to use the Float Grid, now this depends on how you downloaded the framework in first place; if you used the precompiled package, you should go to http://foundation.zurb.com/sites/download.html/#customizeFoundation to customize (basically just selecting the Float Grid and download a new package); if you used the SASS version, go to app.scss remove comment to the line where shows @include foundation-grid;, and comment the one with @include foundation-xy-grid-classes;, then rebuild framework.

Hope this helps.

Solution 2:

You have a typo on in your second column. 'large-8 collumn' should read 'large-8 columns' (one less 'l' and one 's').

Instead of

<divclass="large-8 collumn"style="background-color: lightsalmon">Not displaying a grid system.</div>

Have:

<divclass="large-8 columns"style="background-color: lightsalmon">Not displaying a grid system.</div>

For reference, here is a working pen.