Simplify grid layout and grid example page

We've had many a conversation about grids in the front end meetings, 
please take a look and let me know what you think.

I've pushed this branch to: http://obscure-scrubland-6593.herokuapp.com/examples/grid-layout
so you can preview it. 

- Apply the outer-block mixin to <main>
- Apply the inner-block mixin to #16 

Change grid classnames:
- Use .grid-section for grid sections
- Change .inner-block within .grid to .grid-inner to prevent confusion
with the front end toolkit inner-block mixin.
Grid gutters are only be applied for tablet and up as for mobile, all
grid cells are full width.
- Remove the need to set margins on .grid-divider, this is now always
full width
- Assume .grid-section will always exists within a wrapper using the
.inner-block mixin, so set negative margins for tablet and up to allow
for grid-inner gutters.

- Move styles and javascript which only exist for this example page
into the example page.

The aim is to use this example to decide on how we’d like to implement
grids and to move these grid styles to _grid_layout.scss in the front
end toolkit, then I'll update the elements grid examples with the new classnames.