Replace the .column-... classes in _grids.scss

We had 7 classes in _grids.scss named `.column-...` which were being
used to give a certain column width. These worked by using `@include
grid column()`, which is now deprecated.

`.column-whole` and `.column-three-quarters` can be removed and replaced
with `govuk-grid-column-full` and `govuk-grid-column-three-quarters`
respectively. The other column classes don't have a direct replacment in
GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width`
SASS map in `extensions.scss` to add in extra widths, then use this with
the `govuk-grid-column` mixin to create new classes in for our custom
widths in `_grids.scss`

tests/javascripts/stick-to-window-when-scrolling.test.js

@@ -78,7 +78,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       document.body.innerHTML = `
         <div class="govuk-grid-row">
-          <main class="column-three-quarters column-main">
+          <main class="govuk-grid-column-three-quarters column-main">
             <form method="post" autocomplete="off">
               <div class="govuk-grid-row js-stick-at-top-when-scrolling">
                 <div class="govuk-grid-column-two-thirds ">
@@ -669,7 +669,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
     beforeEach(() => {
 
       document.body.innerHTML = `
-        <main role="main" class="column-three-quarters column-main">
+        <main role="main" class="govuk-grid-column-three-quarters column-main">
           <a class="govuk-back-link" href="">Back</a>
           <h1 class="heading-large js-header">
             Preview of ‘Content email’