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 `<div id="content">`

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 applied for tablet and up as for mobile, all
grid cells are full width.
- Remove the margins on `.grid-divider`, this is now always
full width
- Assume `.grid-section` will always exist within a wrapper using the
`.inner-block` mixin, so set negative margins for tablet and up to allow
for gutters on `.grid-inner`.

- 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.