diff --git a/releases.yml b/releases.yml
index ee5bfca39..79fa58e4d 100644
--- a/releases.yml
+++ b/releases.yml
@@ -3,7 +3,7 @@
     - component: Grid
       url: /docs/patterns/grid#4-column-grid
       status: Updated
-      notes: We've added the <code>.row--4-cols-medium</code> class, which creates a grid with a multiple of 4 columns on all screen sizes.
+      notes: We've added the <code>.p-row</code> class, which creates a grid with a multiple of 4 columns on all screen sizes.
 - version: 4.16.0
   features:
     - component: CTA Block / Borderless
diff --git a/scss/_settings_grid.scss b/scss/_settings_grid.scss
index 5ff455b56..f26435dbe 100644
--- a/scss/_settings_grid.scss
+++ b/scss/_settings_grid.scss
@@ -15,7 +15,7 @@ $threshold-4-med-12-col: $breakpoint-large !default;
 
 $grid-column-prefix: 'col-' !default;
 $grid-row-class: 'row' !default;
-$grid-row-4-cols-class: '#{$grid-row-class}--4-cols-medium' !default;
+$grid-row-4-cols-class: 'p-#{$grid-row-class}' !default;
 $grid-small-col-prefix: '#{$grid-column-prefix}small-' !default;
 $grid-medium-col-prefix: '#{$grid-column-prefix}medium-' !default;
 $grid-large-col-prefix: #{$grid-column-prefix} !default;
diff --git a/templates/404.html b/templates/404.html
index 38cad3427..15d4c5bcf 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <h1 class="u-no-margin--bottom">404 - Page not found</h1>
     </div>
@@ -10,7 +10,7 @@ <h1 class="u-no-margin--bottom">404 - Page not found</h1>
 </div>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <p>Sorry, we can't find the page you're looking for. If you think this is an error on our site, please <a href="https://github.com/canonical/vanilla-framework/issues/new">file a bug on GitHub.</a></p>
     </div>
diff --git a/templates/410.html b/templates/410.html
index 2ab5c4ba0..51c8ca8ce 100644
--- a/templates/410.html
+++ b/templates/410.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <h1 class="u-no-margin--bottom">410 - Page deleted</h1>
     </div>
@@ -10,7 +10,7 @@ <h1 class="u-no-margin--bottom">410 - Page deleted</h1>
 </div>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <p>{{ message or "This page has been removed" }}</p>
     </div>
diff --git a/templates/500.html b/templates/500.html
index 52aeed7d6..858a9894b 100644
--- a/templates/500.html
+++ b/templates/500.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <h1 class="u-no-margin--bottom">500 - Internal server error</h1>
     </div>
@@ -10,7 +10,7 @@ <h1 class="u-no-margin--bottom">500 - Internal server error</h1>
 </div>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <p>Something went wrong on our end. If you have the time, please help us out by <a href="https://github.com/canonical-websites/vanillaframework.io/issues/new">filing a bug.</a></p>
     </div>
diff --git a/templates/_layouts/_footer.html b/templates/_layouts/_footer.html
index a14383e4d..5d0dac402 100644
--- a/templates/_layouts/_footer.html
+++ b/templates/_layouts/_footer.html
@@ -5,7 +5,7 @@
       <p class="u-no-margin--bottom">&copy; {{ now("%Y") }} Canonical Ltd.</p>
     </div>
     <div class="l-docs__main">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <nav class="col-3" aria-label="Footer">
           <ul class="p-list u-no-margin--bottom">
             <li class="p-list__item">
@@ -34,7 +34,7 @@
 </footer>
 {% else %}
 <footer class="p-strip is-dark">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-3">
       <p class="u-no-margin--bottom">&copy; {{ now("%Y") }} Canonical Ltd.</p>
     </div>
diff --git a/templates/accessibility.html b/templates/accessibility.html
index 89023d3a6..5d537e879 100644
--- a/templates/accessibility.html
+++ b/templates/accessibility.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-12">
         <h1>Accessibility guidelines</h1>
         <p>Vanilla Framework aims for Level AA conformance with the <br><a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG) 2.2</a></p>
@@ -85,7 +85,7 @@ <h2>Curated criteria checklist</h2>
 </div>
 
 <div class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6">
         <h2>Key WCAG documents</h2>
         <p>The volume of information on the WCAG 2.0 website can be disorienting. <br>We keep the following links handy for quick reference:</p>
@@ -94,7 +94,7 @@ <h2>Key WCAG documents</h2>
 </div>
 
 <div class="p-strip u-no-padding--top">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <ul class="p-list is-split">
         <li class="p-list__item"><a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0</a>: the W3C standard, includes principles, guidelines and success criteria</li>
         <li class="p-list__item"><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/">Understanding WCAG 2.0</a>: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques</li>
diff --git a/templates/contribute.html b/templates/contribute.html
index 1bf6990aa..41d0005b1 100644
--- a/templates/contribute.html
+++ b/templates/contribute.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-12">
         <h1 class="u-no-margin--bottom">Contribute</h1>
       </div>
@@ -18,7 +18,7 @@ <h1 class="u-no-margin--bottom">Contribute</h1>
 </div>
 
 <div class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="p-strip u-no-padding--top"><h2>Meet the team</h2></div>
       {% for team_member in team_members %}
         <div class="col-3 p-media-object">
@@ -46,10 +46,10 @@ <h3 class="p-media-object__title">
   </div>
 
   <div class="p-strip">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="p-strip u-no-padding--top"><h2>Contributors</h2></div>
       </div>
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         {% for contributor in contributors%}
           <div class="col-3 p-media-object">
             <img src="{{ contributor.avatar_url }}" class="p-media-object__image is-round" alt="">
@@ -74,10 +74,10 @@ <h3 class="p-media-object__title">
 </div>
 
 <div class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="p-strip u-no-padding--top"><h2>Contribute</h2></div>
     </div>
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6">
         <p>When <a href="https://github.com/canonical/vanilla-framework/issues/new/choose">submitting a new issue</a>, please check that it hasn't already been raised by someone else. We've provided a template for new issues which will help you structure your issue to ensure it can be picked up and actioned easily.</p>
         <p>Please provide as much information possible detailing what you're currently experiencing and what you'd expect to experience.</p>
@@ -85,7 +85,7 @@ <h3 class="p-media-object__title">
         <p>When committing changes, make sure to group related changes so that the project is always in a working state. Use succinct yet descriptive commit messages to allow for easy reading of the commit log.</p>
       </div>
       <div class="col-6">
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-6 p-card">
             <h3>Guidelines</h3>
             <p>We follow two guideline documents that align with the practices that the Canonical Web Team follows across all projects.
@@ -95,7 +95,7 @@ <h3>Guidelines</h3>
               </ul>
           </div>
         </div>
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-3 p-card">
             <h3>File a bug</h3>
             <p>We use <a href="https://github.com/canonical/vanilla-framework/issues">GitHub issues</a> to track all our bugs and feature requests.</p>
diff --git a/templates/docs/examples/brochure/_25-25-50.html b/templates/docs/examples/brochure/_25-25-50.html
index 9a6fa4e55..96ac1ebcf 100644
--- a/templates/docs/examples/brochure/_25-25-50.html
+++ b/templates/docs/examples/brochure/_25-25-50.html
@@ -1,5 +1,5 @@
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
   <div class="row--25-25-50">
@@ -25,7 +25,7 @@
       </i>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
    <hr class="p-rule">
   </div>
   <div class="row--25-25-50">
diff --git a/templates/docs/examples/brochure/_25-75-nested.html b/templates/docs/examples/brochure/_25-75-nested.html
index ddf80d9cd..8ac578705 100644
--- a/templates/docs/examples/brochure/_25-75-nested.html
+++ b/templates/docs/examples/brochure/_25-75-nested.html
@@ -1,5 +1,5 @@
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <!-- we remove the bottom margin, as this separator is followed by highlighted separators in the grid below -->
     <hr class="p-rule u-no-margin--bottom">
   </div>
diff --git a/templates/docs/examples/brochure/_50-50.html b/templates/docs/examples/brochure/_50-50.html
index fde80d233..0e2f4d9d5 100644
--- a/templates/docs/examples/brochure/_50-50.html
+++ b/templates/docs/examples/brochure/_50-50.html
@@ -1,6 +1,6 @@
 <section class="p-section">
   <div class="p-section--shallow">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <hr class="p-rule">
     </div>
     <div class="row--50-50">
@@ -16,7 +16,7 @@ <h2>Become a customer</h2>
     </div>
   </div>
   <div class="p-section--shallow">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <hr class="p-rule">
     </div>
     <div class="row--50-50">
@@ -31,7 +31,7 @@ <h2>Free for personal use</h2>
     </div>
   </div>
   <div class="p-section--shallow">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <hr class="p-rule">
     </div>
     <div class="row--50-50">
diff --git a/templates/docs/examples/brochure/index.html b/templates/docs/examples/brochure/index.html
index 6cb5af41a..ca4ff3329 100644
--- a/templates/docs/examples/brochure/index.html
+++ b/templates/docs/examples/brochure/index.html
@@ -57,7 +57,7 @@ <h1>
 </section>
 
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
 
@@ -98,7 +98,7 @@ <h5 class="p-muted-heading">Example</h5>
 <div class="u-fixed-width">
   <h5 class="p-muted-heading">Example</h5>
 </div>
-<div class="row--4-cols-medium">
+<div class="p-row">
   <hr class="p-rule">
 </div>
 
@@ -116,7 +116,7 @@ <h5 class="p-muted-heading">Example</h5>
 
 <div class="u-fixed-width">
   <h5 class="p-muted-heading">Example</h5>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
 </div>
diff --git a/templates/docs/examples/index.html b/templates/docs/examples/index.html
index 808896f59..738285497 100755
--- a/templates/docs/examples/index.html
+++ b/templates/docs/examples/index.html
@@ -13,7 +13,7 @@ <h1>Component examples</h1>
       <hr />
     </div>
 
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-3">
         <h2>Base elements</h2>
         <nav aria-label="Documentation: base elements">
diff --git a/templates/docs/examples/layouts/docs.html b/templates/docs/examples/layouts/docs.html
index 991e6062c..e0d5e2ebf 100644
--- a/templates/docs/examples/layouts/docs.html
+++ b/templates/docs/examples/layouts/docs.html
@@ -58,7 +58,7 @@ <h5 class="u-sv-2">Documentation example</h5>
         </div>
       </div>
       <div class="l-docs__main">
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <form class="p-search-box u-no-margin--bottom">
             <input type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on"/>
             <button type="reset" class="p-search-box__reset" name="close"><i class="p-icon--close">Close</i></button>
@@ -137,7 +137,7 @@ <h3>Side navigation</h3>
 
   <div class="l-docs__title" id="main-content">
     <div class="p-section--shallow">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-12">
           <h1>Main documentation content</h1>
         </div>
@@ -164,7 +164,7 @@ <h2 class="p-table-of-contents__header">On this page</h2>
   </div>
 
   <main class="l-docs__main">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-12">
           <p>Main documentation content block is contained in grid <code>col-9</code>. Any standard base elements or Vanilla components can be used in the documentation pages.</p>
 
@@ -260,7 +260,7 @@ <h3>Grid</h3>
           <p>Main documentation content block is contained in grid <code>col-9</code>.</p>
 
           <p>For two columns split use two <code>col-4</code> columns.</p>
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-4">
               <ul class="p-list">
                 <li class="p-list__item"><a href="#docs/whats-new-2-6">New features in 2.6&nbsp;›</a></li>
@@ -283,7 +283,7 @@ <h3>Grid</h3>
 
           <p>For three columns split use three <code>col-3</code> columns.</p>
 
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-3">
               <ul class="p-list--divided">
                 <li class="p-list__item"><a href="#docs/settings/animation-settings">Animation</a></li>
@@ -317,7 +317,7 @@ <h3>Grid</h3>
         <p style="padding-left: 1.5rem">© 2020 Canonical Ltd.</p>
       </div>
       <div class="l-docs__main">
-        <nav class="row--4-cols-medium" aria-label="Footer">
+        <nav class="p-row" aria-label="Footer">
           <div class="has-cookie">
             <p><a class="is-dark" href="#">Ubuntu</a> and <a class="is-dark" href="#">Canonical</a> are registered trademarks of Canonical Ltd.</p>
             <ul class="p-inline-list--middot">
diff --git a/templates/docs/examples/layouts/documentation.html b/templates/docs/examples/layouts/documentation.html
index 9f8eec82f..05f78d0bc 100644
--- a/templates/docs/examples/layouts/documentation.html
+++ b/templates/docs/examples/layouts/documentation.html
@@ -41,7 +41,7 @@
 </header>
 
 <section id="search-docs" class="p-strip--highlighted is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <form class="p-search-box u-no-margin--bottom">
       <input type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on"/>
       <button type="reset" class="p-search-box__reset" name="close"><i class="p-icon--close">Close</i></button>
@@ -51,7 +51,7 @@
 </section>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <aside class="col-3">
       <nav class="p-side-navigation--raw-html is-sticky" id="drawer" aria-label="Table of contents">
         <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
@@ -210,7 +210,7 @@ <h3>Grid</h3>
       <p>Main documentation content block is contained in grid <code>col-9</code>.</p>
 
       <p>For two columns split use two <code>col-4</code> columns.</p>
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-4">
           <ul class="p-list">
             <li class="p-list__item"><a href="#docs/whats-new-2-6">New features in 2.6&nbsp;›</a></li>
@@ -233,7 +233,7 @@ <h3>Grid</h3>
 
       <p>For three columns split use three <code>col-3</code> columns.</p>
 
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-3">
           <ul class="p-list--divided">
             <li class="p-list__item"><a href="#docs/settings/animation-settings">Animation</a></li>
@@ -260,7 +260,7 @@ <h3>Grid</h3>
 </div>
 
 <footer class="p-strip--highlighted">
-  <nav class="row--4-cols-medium" aria-label="Footer">
+  <nav class="p-row" aria-label="Footer">
     <div class="has-cookie">
       <p>© 2020 Canonical Ltd. <a href="#">Ubuntu</a> and <a href="#">Canonical</a> are registered trademarks of Canonical Ltd.</p>
       <ul class="p-inline-list--middot">
diff --git a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html
index e578ae0e4..ecfff8483 100644
--- a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html
+++ b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html
@@ -11,7 +11,7 @@
 
 {% block content %}
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium grid-demo">
+  <div class="p-row grid-demo">
     {% for i in range(12) %}
     {% with index = i + 1 %}
     <div class="col-small-1 col-medium-1 col-1">
diff --git a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html
index f8b8a4dcd..04184b770 100644
--- a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html
+++ b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html
@@ -12,7 +12,7 @@
 
 {% block content %}
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium grid-demo">
+  <div class="p-row grid-demo">
     {% for i in range(12) %}
     {% with index = i + 1 %}
     <div class="col-small-1 col-medium-1 col-1">
diff --git a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html
index 09a82b9a6..78bbf773a 100644
--- a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html
+++ b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html
@@ -11,7 +11,7 @@
 
 {% block content %}
 <div class="p-strip is-shallow grid-demo u-no-padding-top">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-1">
       <span>.col-1</span>
     </div>
diff --git a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html
index 3e7181bd5..d19008a7f 100644
--- a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html
+++ b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html
@@ -11,7 +11,7 @@
 
 {% block content %}
 <div class="p-strip is-shallow grid-demo u-no-padding-top">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-1">
       <span>.col-1</span>
     </div>
diff --git a/templates/docs/examples/layouts/full-width/default.html b/templates/docs/examples/layouts/full-width/default.html
index 1c4fd1798..681144414 100644
--- a/templates/docs/examples/layouts/full-width/default.html
+++ b/templates/docs/examples/layouts/full-width/default.html
@@ -134,7 +134,7 @@
 
 <div class="p-strip--highlighted is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h1 class="p-heading--2">Get started</h1></div>
       <div class="col-6 col-medium-2"><p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p></div>
     </div>
@@ -145,7 +145,7 @@
 
 <div class="p-strip is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h2>Install</h2></div>
       <div class="col-6 col-medium-2">
         <p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p>
@@ -180,7 +180,7 @@
 
 <div class="p-strip is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h2>Hotlink</h2></div>
       <div class="col-6 col-medium-2">
         <p>You can add Vanilla directly to your markup:</p>
@@ -192,7 +192,7 @@
 
 <div class="p-strip--highlighted is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h2>Download</h2></div>
       <div class="col-6 col-medium-2">
         <p>Download the latest version of Vanilla from GitHub.</p>
@@ -205,7 +205,7 @@
 
 <div class="p-strip is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h2>Local development</h2></div>
       <div class="col-6 col-medium-2">
         <p>To make improvements to Vanilla itself, please follow the instructions on the project’s <a href="https://github.com/canonical/vanilla-framework#vanilla-framework">README.md</a>.</p>
diff --git a/templates/docs/examples/layouts/full-width/no-sidebar.html b/templates/docs/examples/layouts/full-width/no-sidebar.html
index 5023e6583..1cad9a5f5 100644
--- a/templates/docs/examples/layouts/full-width/no-sidebar.html
+++ b/templates/docs/examples/layouts/full-width/no-sidebar.html
@@ -77,7 +77,7 @@
 
 <div class="p-strip--highlighted is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h1 class="p-heading--2">Get started</h1></div>
       <div class="col-6 col-medium-2"><p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p></div>
     </div>
@@ -88,7 +88,7 @@
 
 <div class="p-strip is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h2>Install</h2></div>
       <div class="col-6 col-medium-2">
         <p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p>
@@ -123,7 +123,7 @@
 
 <div class="p-strip is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h2>Hotlink</h2></div>
       <div class="col-6 col-medium-2">
         <p>You can add Vanilla directly to your markup:</p>
@@ -135,7 +135,7 @@
 
 <div class="p-strip--highlighted is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h2>Download</h2></div>
       <div class="col-6 col-medium-2">
         <p>Download the latest version of Vanilla from GitHub.</p>
@@ -148,7 +148,7 @@
 
 <div class="p-strip is-shallow l-full-width">
   <div class="l-main">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6 col-medium-2"><h2>Local development</h2></div>
       <div class="col-6 col-medium-2">
         <p>To make improvements to Vanilla itself, please follow the instructions on the project’s <a href="https://github.com/canonical/vanilla-framework#vanilla-framework">README.md</a>.</p>
diff --git a/templates/docs/examples/layouts/sticky-footer.html b/templates/docs/examples/layouts/sticky-footer.html
index f2dc9f936..dbe61ee89 100644
--- a/templates/docs/examples/layouts/sticky-footer.html
+++ b/templates/docs/examples/layouts/sticky-footer.html
@@ -26,7 +26,7 @@
   </div>
 
   <footer class="l-footer--sticky p-strip--highlighted">
-    <nav class="row--4-cols-medium" aria-label="Footer">
+    <nav class="p-row" aria-label="Footer">
       <div class="has-cookie">
         <p>© 2020 Canonical Ltd. <a href="#">Ubuntu</a> and <a href="#">Canonical</a> are registered trademarks of Canonical Ltd.</p>
         <ul class="p-inline-list--middot">
diff --git a/templates/docs/examples/patterns/card/content-bleed.html b/templates/docs/examples/patterns/card/content-bleed.html
index 0367eb705..06456e096 100644
--- a/templates/docs/examples/patterns/card/content-bleed.html
+++ b/templates/docs/examples/patterns/card/content-bleed.html
@@ -4,7 +4,7 @@
 {% block standalone_css %}patterns_card{% endblock %}
 
 {% block content %}
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-5">
     <div class="p-card u-no-padding">
       <img class="p-card__image" src="https://assets.ubuntu.com/v1/0f33d832-The-State-of-Robotics.jpg" />
diff --git a/templates/docs/examples/patterns/card/image.html b/templates/docs/examples/patterns/card/image.html
index cff5e3644..29ecc46a0 100644
--- a/templates/docs/examples/patterns/card/image.html
+++ b/templates/docs/examples/patterns/card/image.html
@@ -4,7 +4,7 @@
 {% block standalone_css %}patterns_card{% endblock %}
 
 {% block content %}
-<div class="row--4-cols-medium">
+<div class="p-row">
     <div class="col-4">
         <div class="p-card">
             <div class="p-card__content">
diff --git a/templates/docs/examples/patterns/card/overlay.html b/templates/docs/examples/patterns/card/overlay.html
index 80754c646..da9830cae 100644
--- a/templates/docs/examples/patterns/card/overlay.html
+++ b/templates/docs/examples/patterns/card/overlay.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <section class="p-strip--image" style="background-image:url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-6 col-start-large-7">
       <div class="p-card--overlay">
         <h2>Web browsing</h2>
diff --git a/templates/docs/examples/patterns/divider/default.html b/templates/docs/examples/patterns/divider/default.html
index 16b1bfee5..b31bc4e3a 100644
--- a/templates/docs/examples/patterns/divider/default.html
+++ b/templates/docs/examples/patterns/divider/default.html
@@ -4,7 +4,7 @@
 {% block standalone_css %}patterns_divider{% endblock %}
 
 {% block content %}
-<div class="row--4-cols-medium p-divider">
+<div class="p-row p-divider">
   <div class="col-4 p-divider__block">
     <h2>Lorem ipsum</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.</p>
diff --git a/templates/docs/examples/patterns/empty-state/user-triggered.html b/templates/docs/examples/patterns/empty-state/user-triggered.html
index 20947a911..8fb24b21d 100644
--- a/templates/docs/examples/patterns/empty-state/user-triggered.html
+++ b/templates/docs/examples/patterns/empty-state/user-triggered.html
@@ -17,7 +17,7 @@ <h2>Search results for "flibberdygibbery"</h2>
   </div>
 </section>
 <section id="search-results" class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-4 col-medium-2">
       <div class="p-heading--4">
         Why not try widening your search?<br> You can do this by:
@@ -34,7 +34,7 @@ <h2>Search results for "flibberdygibbery"</h2>
   <div class="u-fixed-width">
     <hr />
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-4 col-medium-2">
       <div class="p-heading--4">Still no luck?</div>
     </div>
diff --git a/templates/docs/examples/patterns/forms/_form-stacked.html b/templates/docs/examples/patterns/forms/_form-stacked.html
index d982f4365..7f852a221 100644
--- a/templates/docs/examples/patterns/forms/_form-stacked.html
+++ b/templates/docs/examples/patterns/forms/_form-stacked.html
@@ -1,5 +1,5 @@
 <form class="p-form p-form--stacked">
-  <div class="p-form__group row--4-cols-medium">
+  <div class="p-form__group p-row">
 
     <div class="col-4">
       <label for="full-name-stacked" class="p-form__label">Full name</label>
@@ -11,7 +11,7 @@
       </div>
     </div>
   </div>
-  <div class="p-form__group row--4-cols-medium">
+  <div class="p-form__group p-row">
 
     <div class="col-4">
       <label for="username-stacked" class="p-form__label">Username</label>
@@ -26,7 +26,7 @@
       </div>
     </div>
   </div>
-  <div class="p-form__group row--4-cols-medium p-form-validation is-error">
+  <div class="p-form__group p-row p-form-validation is-error">
 
     <div class="col-4">
       <label for="username-stacked-error" class="p-form__label is-required">Email address</label>
@@ -39,7 +39,7 @@
       </div>
     </div>
   </div>
-  <div class="p-form__group row--4-cols-medium">
+  <div class="p-form__group p-row">
 
     <div class="col-4">
       <label for="address-optional-stacked0" class="p-form__label">Address line 1</label>
@@ -51,7 +51,7 @@
       </div>
     </div>
   </div>
-  <div class="p-form__group row--4-cols-medium">
+  <div class="p-form__group p-row">
 
     <div class="col-4">
       <label for="address-optional-stacked1" class="p-form__label">Address line 2</label>
@@ -63,7 +63,7 @@
       </div>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <button class="p-button--positive u-float-right" name="add-details">Add details</button>
     </div>
diff --git a/templates/docs/examples/patterns/forms/tick-variants.html b/templates/docs/examples/patterns/forms/tick-variants.html
index a605eff17..8802000b9 100644
--- a/templates/docs/examples/patterns/forms/tick-variants.html
+++ b/templates/docs/examples/patterns/forms/tick-variants.html
@@ -6,7 +6,7 @@
 {% block content %}
 <form>
 
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-6">
     <h3>.p-checkbox component</h3>
 
diff --git a/templates/docs/examples/patterns/grid/4-columns-medium-6-columns-medium-comparison-responsive.html b/templates/docs/examples/patterns/grid/4-columns-medium-6-columns-medium-comparison-responsive.html
index b004d2690..b2cbe8f5f 100644
--- a/templates/docs/examples/patterns/grid/4-columns-medium-6-columns-medium-comparison-responsive.html
+++ b/templates/docs/examples/patterns/grid/4-columns-medium-6-columns-medium-comparison-responsive.html
@@ -10,7 +10,7 @@
     <section>
       <p>All breakpoints given</p>
       {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         show_row_class=True,
         columns=[
           {
@@ -69,7 +69,7 @@
     <section>
       <p>Missing large breakpoint</p>
       {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         show_row_class=True,
         columns=[
           {
@@ -126,7 +126,7 @@
     <section>
       <p>Missing medium breakpoint</p>
       {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         show_row_class=True,
         columns=[
           {
@@ -179,7 +179,7 @@
     <section>
       <p>Missing small breakpoint</p>
       {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         show_row_class=True,
         columns=[
           {
@@ -232,7 +232,7 @@
     <section>
       <p>Large only</p>
       {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         show_row_class=True,
         columns=[
           {
@@ -279,7 +279,7 @@
     <section>
       <p>Medium only</p>
       {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         show_row_class=True,
         columns=[
           {
@@ -326,7 +326,7 @@
     <section>
       <p>Small only</p>
       {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         show_row_class=True,
         columns=[
           {
diff --git a/templates/docs/examples/patterns/grid/4-columns-medium-mixed-responsive.html b/templates/docs/examples/patterns/grid/4-columns-medium-mixed-responsive.html
index e8c35489a..ce3c9ade2 100644
--- a/templates/docs/examples/patterns/grid/4-columns-medium-mixed-responsive.html
+++ b/templates/docs/examples/patterns/grid/4-columns-medium-mixed-responsive.html
@@ -8,7 +8,7 @@
 {% block content %}
   <div class="grid-demo">
     {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         columns=[
           {'breakpoints': [
             {'name': 'large', 'num_columns': 4},
diff --git a/templates/docs/examples/patterns/grid/4-columns-medium-nested-responsive.html b/templates/docs/examples/patterns/grid/4-columns-medium-nested-responsive.html
index 2cdc6c1af..f4bbcdd52 100644
--- a/templates/docs/examples/patterns/grid/4-columns-medium-nested-responsive.html
+++ b/templates/docs/examples/patterns/grid/4-columns-medium-nested-responsive.html
@@ -8,7 +8,7 @@
 {% block content %}
   <div class="grid-demo">
     {{ grid_example(
-      row_class="row--4-cols-medium",
+      row_class="p-row",
       columns=[
         {
           'breakpoints': [
diff --git a/templates/docs/examples/patterns/grid/4-columns-medium-offsets-responsive.html b/templates/docs/examples/patterns/grid/4-columns-medium-offsets-responsive.html
index 8bdf04444..f7173bb66 100644
--- a/templates/docs/examples/patterns/grid/4-columns-medium-offsets-responsive.html
+++ b/templates/docs/examples/patterns/grid/4-columns-medium-offsets-responsive.html
@@ -8,7 +8,7 @@
 {% block content %}
   <div class="grid-demo">
     {{ grid_example(
-      row_class="row--4-cols-medium",
+      row_class="p-row",
       columns=[
         {
           'breakpoints': [
diff --git a/templates/docs/examples/patterns/grid/4-columns-medium-reordering-responsive.html b/templates/docs/examples/patterns/grid/4-columns-medium-reordering-responsive.html
index aac8658c2..9204cd30f 100644
--- a/templates/docs/examples/patterns/grid/4-columns-medium-reordering-responsive.html
+++ b/templates/docs/examples/patterns/grid/4-columns-medium-reordering-responsive.html
@@ -8,7 +8,7 @@
 {% block content %}
   <div class="grid-demo">
     {{ grid_example(
-      row_class="row--4-cols-medium",
+      row_class="p-row",
       columns=[
         {
           'breakpoints': [
diff --git a/templates/docs/examples/patterns/grid/4-columns-medium-responsive.html b/templates/docs/examples/patterns/grid/4-columns-medium-responsive.html
index 8f1e27062..e4a2d0b7e 100644
--- a/templates/docs/examples/patterns/grid/4-columns-medium-responsive.html
+++ b/templates/docs/examples/patterns/grid/4-columns-medium-responsive.html
@@ -8,7 +8,7 @@
 {% block content %}
   <div class="grid-demo">
     {{ grid_example(
-        row_class="row--4-cols-medium",
+        row_class="p-row",
         columns=[
           {'breakpoints': [
             {'name': 'medium', 'num_columns': 1}
diff --git a/templates/docs/examples/patterns/grid/bordered.html b/templates/docs/examples/patterns/grid/bordered.html
index 68542e71e..197a6a4d7 100644
--- a/templates/docs/examples/patterns/grid/bordered.html
+++ b/templates/docs/examples/patterns/grid/bordered.html
@@ -5,12 +5,12 @@
 
 {% block content %}
 <div class="grid-demo">
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-12">
       <span>.col-12</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-11">
       <span>.col-11</span>
     </div>
@@ -18,7 +18,7 @@
       <span>.col-1</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-10">
       <span>.col-10</span>
     </div>
@@ -26,7 +26,7 @@
       <span>.col-2</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-9">
       <span>.col-9</span>
     </div>
@@ -34,7 +34,7 @@
       <span>.col-9</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-8">
       <span>.col-8</span>
     </div>
@@ -42,7 +42,7 @@
       <span>.col-4</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-7">
       <span>.col-7</span>
     </div>
@@ -50,7 +50,7 @@
       <span>.col-5</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-6">
       <span>.col-6</span>
     </div>
@@ -58,7 +58,7 @@
       <span>.col-6</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-5">
       <span>.col-5</span>
     </div>
@@ -66,7 +66,7 @@
       <span>.col-7</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-4">
       <span>.col-4</span>
     </div>
@@ -74,7 +74,7 @@
       <span>.col-8</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-3">
       <span>.col-3</span>
     </div>
@@ -82,7 +82,7 @@
       <span>.col-9</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-2">
       <span>.col-2</span>
     </div>
@@ -90,7 +90,7 @@
       <span>.col-10</span>
     </div>
   </div>
-  <div class="row--4-cols-medium is-bordered">
+  <div class="p-row is-bordered">
     <div class="col-1">
       <span>.col-1</span>
     </div>
diff --git a/templates/docs/examples/patterns/grid/combined.html b/templates/docs/examples/patterns/grid/combined.html
index 9b6e6d6e6..b43883758 100644
--- a/templates/docs/examples/patterns/grid/combined.html
+++ b/templates/docs/examples/patterns/grid/combined.html
@@ -32,5 +32,6 @@
 <section>{% include 'docs/examples/patterns/grid/4-columns-medium-reordering-responsive.html' %}</section>
 <section>{% include 'docs/examples/patterns/grid/4-columns-medium-offsets-responsive.html' %}</section>
 <section>{% include 'docs/examples/patterns/grid/4-columns-medium-nested-responsive.html' %}</section>
+<section>{% include 'docs/examples/patterns/grid/legacy.html' %}</section>
 {% endwith %}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/grid/default.html b/templates/docs/examples/patterns/grid/default.html
index 0021eb5c3..d2713bc36 100644
--- a/templates/docs/examples/patterns/grid/default.html
+++ b/templates/docs/examples/patterns/grid/default.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="grid-demo">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-1 col-medium-1 col-small-1">
       <span>.col-1</span>
     </div>
diff --git a/templates/docs/examples/patterns/grid/empty-columns.html b/templates/docs/examples/patterns/grid/empty-columns.html
index f14b1af58..ac6489c12 100644
--- a/templates/docs/examples/patterns/grid/empty-columns.html
+++ b/templates/docs/examples/patterns/grid/empty-columns.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="grid-demo">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-8">
       .col-8
     </div>
@@ -13,22 +13,22 @@
       .col-4
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
       <div class="col-7">
         .col-7
       </div>
       <div class="col-4">
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-3 col-start-large-2">.col-3 .col-start-large-2 inside .col-4</div>
         </div>
       </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
       <div class="col-7">
         .col-7
       </div>
       <div class="col-4">
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-3">.col-3 inside .col-4</div>
         </div>
       </div>
diff --git a/templates/docs/examples/patterns/grid/full.html b/templates/docs/examples/patterns/grid/full.html
index 0f325bd2e..a5488627a 100644
--- a/templates/docs/examples/patterns/grid/full.html
+++ b/templates/docs/examples/patterns/grid/full.html
@@ -5,12 +5,12 @@
 
 {% block content %}
 <div class="grid-demo">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <span>.col-12</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-11">
       <span>.col-11</span>
     </div>
@@ -18,7 +18,7 @@
       <span>.col-1</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-10">
       <span>.col-10</span>
     </div>
@@ -26,7 +26,7 @@
       <span>.col-2</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-9">
       <span>.col-9</span>
     </div>
@@ -34,7 +34,7 @@
       <span>.col-3</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-8">
       <span>.col-8</span>
     </div>
@@ -42,7 +42,7 @@
       <span>.col-4</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-7">
       <span>.col-7</span>
     </div>
@@ -50,7 +50,7 @@
       <span>.col-5</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-6">
       <span>.col-6</span>
     </div>
@@ -58,7 +58,7 @@
       <span>.col-6</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-5">
       <span>.col-5</span>
     </div>
@@ -66,7 +66,7 @@
       <span>.col-7</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-4">
       <span>.col-4</span>
     </div>
@@ -74,7 +74,7 @@
       <span>.col-8</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-3">
       <span>.col-3</span>
     </div>
@@ -82,7 +82,7 @@
       <span>.col-9</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-2">
       <span>.col-2</span>
     </div>
@@ -90,7 +90,7 @@
       <span>.col-10</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-1">
       <span>.col-1</span>
     </div>
@@ -98,7 +98,7 @@
       <span>.col-11</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-1">
       <span>.col-1</span>
     </div>
@@ -136,7 +136,7 @@
       <span>.col-1</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-2">
       <span>.col-2</span>
     </div>
@@ -156,7 +156,7 @@
       <span>.col-2</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-3">
       <span>.col-3</span>
     </div>
@@ -170,7 +170,7 @@
       <span>.col-3</span>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-4">
       <span>.col-4</span>
     </div>
diff --git a/templates/docs/examples/patterns/grid/incorrect-empty-columns.html b/templates/docs/examples/patterns/grid/incorrect-empty-columns.html
index ddd51149c..62c170b88 100644
--- a/templates/docs/examples/patterns/grid/incorrect-empty-columns.html
+++ b/templates/docs/examples/patterns/grid/incorrect-empty-columns.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="grid-demo">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-1">
       .col-1
     </div>
@@ -43,12 +43,12 @@
       .col-1
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
       <div class="col-7">
         .col-7
       </div>
       <div class="col-4">
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-3 col-start-large-7">.col-3 .col-start-large-7</div>
         </div>
       </div>
diff --git a/templates/docs/examples/patterns/grid/legacy.html b/templates/docs/examples/patterns/grid/legacy.html
new file mode 100644
index 000000000..6213499df
--- /dev/null
+++ b/templates/docs/examples/patterns/grid/legacy.html
@@ -0,0 +1,47 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Legacy{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+<div class="grid-demo">
+  <div class="row">
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+    <div class="col-1 col-medium-1 col-small-1">
+      <span>.col-1</span>
+    </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-404.html b/templates/docs/examples/patterns/hero/hero-404.html
index d6e4808fb..f1464a332 100644
--- a/templates/docs/examples/patterns/hero/hero-404.html
+++ b/templates/docs/examples/patterns/hero/hero-404.html
@@ -16,7 +16,7 @@ <h1>Page not found</h1>
                 <p class="p-heading--2">We can't find the page you're looking for.
                     <a href="#">File a bug</a> if you think this might be an error.</p>
             </div>
-            <div class="row--4-cols-medium">
+            <div class="p-row">
                 <div class="col-6">
                     <form class="p-search-box u-text-max-width">
                         <label class="u-off-screen" for="search">Search</label>
diff --git a/templates/docs/examples/patterns/hero/hero-nested-grid.html b/templates/docs/examples/patterns/hero/hero-nested-grid.html
index 451050b00..2170523b9 100644
--- a/templates/docs/examples/patterns/hero/hero-nested-grid.html
+++ b/templates/docs/examples/patterns/hero/hero-nested-grid.html
@@ -15,7 +15,7 @@
             </div>
         </div>
         <div class="col">
-            <div class="row--4-cols-medium">
+            <div class="p-row">
                 <div class="col-6">
                     <div class="p-section--shallow">
                         <h1>What is Kubeflow?</h1>
diff --git a/templates/docs/examples/patterns/hero/hero-sections-search.html b/templates/docs/examples/patterns/hero/hero-sections-search.html
index d3772a1a8..cd359cb88 100644
--- a/templates/docs/examples/patterns/hero/hero-sections-search.html
+++ b/templates/docs/examples/patterns/hero/hero-sections-search.html
@@ -14,7 +14,7 @@ <h1>Find a Canonical partner</h1>
             <div class="p-section--shallow">
                 <p>Canonical's network of Ubuntu partners spans the full range of our product suite. We offer partner programmes for public clouds, IHVs/OEMs, desktop, channel/resellers and global systems integrators.</p>
             </div>
-            <div class="row--4-cols-medium">
+            <div class="p-row">
                 <div class="col-6">
                     <form class="p-search-box u-text-max-width">
                         <label class="u-off-screen" for="search">Search</label>
diff --git a/templates/docs/examples/patterns/rule/muted.html b/templates/docs/examples/patterns/rule/muted.html
index 2157d4706..edc46a63c 100644
--- a/templates/docs/examples/patterns/rule/muted.html
+++ b/templates/docs/examples/patterns/rule/muted.html
@@ -9,7 +9,7 @@
   <div class="row--25-75">
     <div class="col">
       <hr class="p-rule">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-6">
           <h2>Infrastructure, <br>your way</h2>
           <p>Flexible and engineered for efficiency. <br>From small, private clouds on rails to clouds at any scale.</p>
diff --git a/templates/docs/examples/patterns/side-navigation/default.html b/templates/docs/examples/patterns/side-navigation/default.html
index 2fd9f30db..8df491dee 100644
--- a/templates/docs/examples/patterns/side-navigation/default.html
+++ b/templates/docs/examples/patterns/side-navigation/default.html
@@ -4,7 +4,7 @@
 {% block standalone_css %}patterns_side-navigation{% endblock %}
 
 {% block content %}
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-4">
       {% include "docs/examples/patterns/side-navigation/_default.html" %}
   </div>
diff --git a/templates/docs/examples/patterns/side-navigation/expandable.html b/templates/docs/examples/patterns/side-navigation/expandable.html
index 4308ef7fe..a5e590296 100644
--- a/templates/docs/examples/patterns/side-navigation/expandable.html
+++ b/templates/docs/examples/patterns/side-navigation/expandable.html
@@ -4,7 +4,7 @@
 {% block standalone_css %}patterns_side-navigation{% endblock %}
 
 {% block content %}
-<div class="row--4-cols-medium">
+<div class="p-row">
    <div class="col-4">
     {% include "docs/examples/patterns/side-navigation/_expandable.html" %}
   </div>
diff --git a/templates/docs/examples/patterns/strips/accent.html b/templates/docs/examples/patterns/strips/accent.html
index becb895f3..03ec94580 100644
--- a/templates/docs/examples/patterns/strips/accent.html
+++ b/templates/docs/examples/patterns/strips/accent.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <section class="p-strip--accent">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-8">
       <h1>Still running Ubuntu 14.04 LTS?</h1>
       <p>Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.</p>
diff --git a/templates/docs/examples/patterns/strips/image.html b/templates/docs/examples/patterns/strips/image.html
index 48361de1c..d4a7ae6c8 100644
--- a/templates/docs/examples/patterns/strips/image.html
+++ b/templates/docs/examples/patterns/strips/image.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <section class="p-strip--image is-light" style="background-image:url('https://assets.ubuntu.com/v1/1d2ab6ba-suru-background.png')">
-  <div class="row--4-cols-medium u-vertically-center">
+  <div class="p-row u-vertically-center">
     <div class="col-8">
       <h1>Get started with big software, fast</h1>
       <p>conjure-up lets you summon up a big-software stack as a “spell” — a model of the stack, combined with extra know-how to get you from an installed stack to a fully usable one. Start using your big software instead of learning how to deploy
@@ -18,8 +18,8 @@ <h1>Get started with big software, fast</h1>
 </section>
 
 <section class="p-strip--image is-dark" style="background-image:url('https://assets.ubuntu.com/v1/9b68976e-Aubergine_suru_background_2.png')">
-  <div class="row--4-cols-medium">
-    <div class="row--4-cols-medium u-vertically-center">
+  <div class="p-row">
+    <div class="p-row u-vertically-center">
       <div class="col-8">
         <h1>We are Canonical</h1>
         <p>It is our mission to make open source software available to people everywhere. We believe the best way to fuel innovation is to give the innovators the technology they need.</p>
diff --git a/templates/docs/examples/patterns/strips/is-bordered.html b/templates/docs/examples/patterns/strips/is-bordered.html
index b4bed895e..254616b1f 100644
--- a/templates/docs/examples/patterns/strips/is-bordered.html
+++ b/templates/docs/examples/patterns/strips/is-bordered.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <section class="p-strip is-bordered">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-8">
       <h2>The node lifecycle</h2>
       <p>Each machine (“node”) managed by MAAS goes through a lifecycle — from its enlistment or onboarding to MAAS, through commissioning when we inventory and can setup firmware or other hardware-specific elements, then allocation to a user and deployment, and finally they are released back to the pool or retired altogether.</p>
diff --git a/templates/docs/examples/patterns/strips/strips-dark.html b/templates/docs/examples/patterns/strips/strips-dark.html
index f10797ae6..e2491b155 100644
--- a/templates/docs/examples/patterns/strips/strips-dark.html
+++ b/templates/docs/examples/patterns/strips/strips-dark.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="p-strip--dark">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <p>This is a dark row</p>
     </div>
diff --git a/templates/docs/examples/patterns/strips/strips-light.html b/templates/docs/examples/patterns/strips/strips-light.html
index ff0b62e6e..75e922a11 100644
--- a/templates/docs/examples/patterns/strips/strips-light.html
+++ b/templates/docs/examples/patterns/strips/strips-light.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="p-strip--light">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <p>This is a light row</p>
     </div>
diff --git a/templates/docs/examples/patterns/strips/suru-topped.html b/templates/docs/examples/patterns/strips/suru-topped.html
index e846dce9a..e14e16198 100644
--- a/templates/docs/examples/patterns/strips/suru-topped.html
+++ b/templates/docs/examples/patterns/strips/suru-topped.html
@@ -5,13 +5,13 @@
 
 {% block content %}
 <section class="p-strip--suru-topped">
-  <div class="row--4-cols-medium u-vertically-center">
+  <div class="p-row u-vertically-center">
     <div class="col-8">
       <h1>Accessibility guidelines</h1>
     </div>
   </div>
 </section>
-<div class="row--4-cols-medium">
+<div class="p-row">
 	<div class="col-8">
 		<h4>Vanilla aims to be as inclusive as possible.</h4>
 		<p>While traditionally accessibility focuses on making the web more accessible for users with permanent disabilities, a focus on accessibility can deliver an improved user experience for everyone, including those with a temporary or circumstantial disability.</p>
diff --git a/templates/docs/examples/patterns/strips/suru.html b/templates/docs/examples/patterns/strips/suru.html
index 683938e42..990589793 100644
--- a/templates/docs/examples/patterns/strips/suru.html
+++ b/templates/docs/examples/patterns/strips/suru.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <section class="p-strip--suru">
-  <div class="row--4-cols-medium u-vertically-center">
+  <div class="p-row u-vertically-center">
     <div class="col-8">
       <h1>A simple, extensible CSS framework</h1>
       <p>Backed by open-source code and written in Sass by the Canonical Web Team.</p>
diff --git a/templates/docs/examples/patterns/tables/table-expanding.html b/templates/docs/examples/patterns/tables/table-expanding.html
index fbec1dbef..a82ec74ae 100644
--- a/templates/docs/examples/patterns/tables/table-expanding.html
+++ b/templates/docs/examples/patterns/tables/table-expanding.html
@@ -30,7 +30,7 @@
                     data-hidden-text="Show">Show</button>
             </td>
             <td id="expanded-row" class="p-table__expanding-panel" aria-hidden="true">
-                <div class="row--4-cols-medium">
+                <div class="p-row">
                     <div class="col-8">
                         <h4>Expanding table cell</h4>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
@@ -51,7 +51,7 @@ <h4>Expanding table cell</h4>
                     data-hidden-text="Show">Show</button>
             </td>
             <td id="expanded-row-2" class="p-table__expanding-panel" aria-hidden="true">
-                <div class="row--4-cols-medium">
+                <div class="p-row">
                     <div class="col-8">
                         <h4>Expanding table cell</h4>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
@@ -72,7 +72,7 @@ <h4>Expanding table cell</h4>
                     data-hidden-text="Show">Show</button>
             </td>
             <td id="expanded-row-3" class="p-table__expanding-panel" aria-hidden="true">
-                <div class="row--4-cols-medium">
+                <div class="p-row">
                     <div class="col-8">
                         <h4>Expanding table cell</h4>
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
diff --git a/templates/docs/examples/standalone.html b/templates/docs/examples/standalone.html
index a79361711..d5216613f 100644
--- a/templates/docs/examples/standalone.html
+++ b/templates/docs/examples/standalone.html
@@ -8,14 +8,14 @@
 
 {% block body %}
 <main id="main-content" class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-12">
         <h1>Standalone component examples</h1>
         <hr />
         <p>Examples below use CSS built with single pattern included with base styles instead of the whole Vanilla framework CSS file.</p>
       </div>
     </div>
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-3">
         <h2>Base elements</h2>
         <nav aria-label="Documentation: base elements">
diff --git a/templates/docs/examples/templates/maas-docs-grid.html b/templates/docs/examples/templates/maas-docs-grid.html
index 6a93bf800..fca7d4750 100644
--- a/templates/docs/examples/templates/maas-docs-grid.html
+++ b/templates/docs/examples/templates/maas-docs-grid.html
@@ -9,7 +9,7 @@
 
 {% block content %}
 <header id="navigation" class="p-navigation is-dark">
-  <div class="p-navigation__row row--4-cols-medium">
+  <div class="p-navigation__row p-row">
     <div class="p-navigation__banner">
       <div class="p-navigation__logo">
         <a href="#" class="p-navigation__item">
@@ -43,7 +43,7 @@
 </header>
 
 <section id="search-docs" class="p-strip--highlighted is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <form class="p-search-box u-no-margin--bottom">
       <input aria-label="search" type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on">
       <button type="reset" class="p-search-box__reset" name="close"><i class="p-icon--close">Close</i></button>
@@ -54,7 +54,7 @@
 </section>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <aside class="col-3">
       <nav class="p-side-navigation" id="drawer" aria-label="Example side">
         <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
@@ -320,7 +320,7 @@ <h2 id="heading--production-environment">Requirements for a production environme
 </div>
 
 <footer class="p-strip">
-  <nav class="row--4-cols-medium" aria-label="Footer">
+  <nav class="p-row" aria-label="Footer">
     <div class="has-cookie">
       <p>© 2020 Canonical Ltd. <a href="#">Ubuntu</a> and <a href="#">Canonical</a> are registered trademarks of Canonical Ltd.</p>
       <ul class="p-inline-list--middot">
diff --git a/templates/docs/examples/templates/maas-layout.html b/templates/docs/examples/templates/maas-layout.html
index d1217e557..804a7d954 100644
--- a/templates/docs/examples/templates/maas-layout.html
+++ b/templates/docs/examples/templates/maas-layout.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 <header id="navigation" class="p-navigation">
-  <div class="row--4-cols-medium p-navigation__row">
+  <div class="p-row p-navigation__row">
     <div class="p-navigation__banner">
       <div class="p-navigation__logo">
         <a class="p-navigation__item" href="#">
@@ -46,7 +46,7 @@
   </div>
 </header>
 <div class="p-strip--highlighted is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-8">
       <h1 class="p-heading--3">Machines</h1>
     </div>
@@ -76,7 +76,7 @@ <h1 class="p-heading--3">Machines</h1>
 </div>
 <div class="p-strip is-shallow">
   <nav class="p-tabs" aria-label="Example tabs">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <ul class="p-tabs__list" role="tablist">
         <li class="p-tabs__item" role="presentation">
           <a href="#section1" class="p-tabs__link" tabindex="0" aria-controls="section1" aria-selected="true">Section
@@ -91,7 +91,7 @@ <h1 class="p-heading--3">Machines</h1>
       </ul>
     </div>
   </nav>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-3">
       <div class="">
         <h4 class="u-sv-1">Filter by</h4>
@@ -207,7 +207,7 @@ <h4 class="u-sv-1">Filter by</h4>
 </div>
 <hr />
 <footer class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <p>© 2017 Company name and logo are registered trademarks of Company Ltd.</p>
     <nav aria-label="Example footer">
       <ul class="p-inline-list--middot">
diff --git a/templates/docs/examples/templates/responsive.html b/templates/docs/examples/templates/responsive.html
index 98c20f5fc..a0a7dee55 100644
--- a/templates/docs/examples/templates/responsive.html
+++ b/templates/docs/examples/templates/responsive.html
@@ -22,7 +22,7 @@ <h4>Stats</h4>
     <h4>Grid</h4>
   </div>
   <div class="grid-demo">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-1 col-medium-1 col-small-1">
       </div>
       <div class="col-1 col-medium-1 col-small-1">
@@ -52,7 +52,7 @@ <h4>Grid</h4>
 </div>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-6 col-medium-2">
       <h4>Hide utilities</h4>
       <p><code>u-hide--small</code>: <span class="u-hide--small">hidden when grid is 4 cols</span></p>
diff --git a/templates/docs/examples/templates/snapcraft-publicise.html b/templates/docs/examples/templates/snapcraft-publicise.html
index 32a24a8af..be45a4064 100644
--- a/templates/docs/examples/templates/snapcraft-publicise.html
+++ b/templates/docs/examples/templates/snapcraft-publicise.html
@@ -149,7 +149,7 @@ <h1 class="p-heading--3">
   </section>
 
   <div class="p-strip is-shallow">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-3">
         <nav class="p-side-navigation" aria-label="Example side navigation">
           <ul class="p-side-navigation__list">
@@ -168,10 +168,10 @@ <h1 class="p-heading--3">
 
       <div class="col-9">
 
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <h4>Promote your snap using Snap Store badges</h4>
         </div>
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-2">
             <label for="select-language">Language:</label>
           </div>
@@ -194,16 +194,16 @@ <h4>Promote your snap using Snap Store badges</h4>
           </div>
         </div>
 
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <hr />
         </div>
 
         <div id="en_content" class="js-language-content">
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-2">
             </div>
             <div class="col-7">
-              <div class="row--4-cols-medium">
+              <div class="p-row">
                 <div class="col-5">
                   <p class="snapcraft-publicise__images">
 
@@ -216,7 +216,7 @@ <h4>Promote your snap using Snap Store badges</h4>
             </div>
           </div>
 
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-2">
               <label>HTML:</label>
             </div>
@@ -227,7 +227,7 @@ <h4>Promote your snap using Snap Store badges</h4>
             </div>
           </div>
 
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-2">
               <label>Markdown:</label>
             </div>
@@ -236,15 +236,15 @@ <h4>Promote your snap using Snap Store badges</h4>
             </div>
           </div>
 
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <hr />
           </div>
 
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-2">
             </div>
             <div class="col-7">
-              <div class="row--4-cols-medium">
+              <div class="p-row">
                 <div class="col-5">
                   <p class="snapcraft-publicise__images">
 
@@ -257,7 +257,7 @@ <h4>Promote your snap using Snap Store badges</h4>
             </div>
           </div>
 
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-2">
               <label>HTML:</label>
             </div>
@@ -268,7 +268,7 @@ <h4>Promote your snap using Snap Store badges</h4>
             </div>
           </div>
 
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-2">
               <label>Markdown:</label>
             </div>
@@ -278,11 +278,11 @@ <h4>Promote your snap using Snap Store badges</h4>
           </div>
         </div>
 
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <hr />
         </div>
 
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-2">
             Download all:
           </div>
@@ -300,7 +300,7 @@ <h4>Promote your snap using Snap Store badges</h4>
 </div>
 
 <footer class="p-strip--highlighted p-sticky-footer" id="footer">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-9">
       <p>
         <a class="p-link--soft" href="#">Back to top<i class="p-icon--top"></i></a>
diff --git a/templates/docs/examples/templates/tick-elements.html b/templates/docs/examples/templates/tick-elements.html
index 7446a73e2..7bcc89668 100644
--- a/templates/docs/examples/templates/tick-elements.html
+++ b/templates/docs/examples/templates/tick-elements.html
@@ -5,9 +5,9 @@
 
 <div class="p-strip">
   <div class="p-strip is-shallow u-no-padding--top">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
     </div>
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-3">
         <form>
           <label class="p-checkbox">
@@ -90,7 +90,7 @@
     </div>
   </div>
   <div class="p-strip is-shallow u-no-padding--top">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <hr />
       <p>In padded containers (table cells, some list items), checkboxes and labels need to align with text not wrapped in a tag. Use <code>.p-checkbox--inline</code> or <code>.p-radio--inline</code> elements to achieve that.</p>
     </div>
diff --git a/templates/docs/examples/templates/typographic-spacing.html b/templates/docs/examples/templates/typographic-spacing.html
index a14437b47..6316700ef 100644
--- a/templates/docs/examples/templates/typographic-spacing.html
+++ b/templates/docs/examples/templates/typographic-spacing.html
@@ -7,7 +7,7 @@
     display: flex;
     justify-content: space-between;
   }
-  [class^='row'] {
+  .row, .p-row {
     max-width: 100vw;
   }
 </style>
@@ -694,13 +694,13 @@ <h1>h1</h1>
 <hr />
 <!-- <p>Headings preceding block level element</p> -->
 <div class="p-strip--highlighted is-shallow">
-  <div class="row--4-cols-medium" style="max-width: 100%">
+  <div class="p-row" style="max-width: 100%">
     <p>Headings preceding block level element</p>
   </div>
-  <div class="row--4-cols-medium" style="max-width: 100%">
+  <div class="p-row" style="max-width: 100%">
     <hr />
   </div>
-  <div class="row--4-cols-medium" style="max-width: 100%">
+  <div class="p-row" style="max-width: 100%">
     <div class="col-2">
       <h1>H1</h1>
       <div class="p-card">
@@ -752,10 +752,10 @@ <h6>Title</h6>
 </div>
 <!-- blog text -->
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium" style="max-width: 100%">
+  <div class="p-row" style="max-width: 100%">
     <hr />
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
       Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
       Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
@@ -931,7 +931,7 @@ <h2>Canonical’s AI and ML solutions feature…</h2>
   </div>
 </div>
 <hr />
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-6 p-strip is-shallow">
     <h1>
       Headings and paragraphs are siblings, p + h* rules apply
@@ -1036,7 +1036,7 @@ <h4>
   </div>
 </div>
 <hr />
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-6">
     <h3>List styles and spacing</h3>
     <p>This is just a line of text before unordered list:</p>
@@ -1065,7 +1065,7 @@ <h3>List styles and spacing</h3>
   </div>
 </div>
 <hr />
-<div class="row--4-cols-medium">
+<div class="p-row">
   <a target="_blank" rel="noopener noreferrer"
     href="https://assets.ubuntu.com/v1/06153e05-screenshot-tv-homepage-wide-image-900x334.jpg">
     <img
@@ -1074,7 +1074,7 @@ <h3>List styles and spacing</h3>
   </a>
   <h3>This is a heading following an image</h3>
 </div>
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-2">
     <h1>Heading</h1>
     <div class="p-strip is-dark">
diff --git a/templates/docs/examples/templates/vertical-spacing.html b/templates/docs/examples/templates/vertical-spacing.html
index a0ff94204..147cbddae 100644
--- a/templates/docs/examples/templates/vertical-spacing.html
+++ b/templates/docs/examples/templates/vertical-spacing.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 <div class="p-strip is-bordered is-deep">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-4">
       <h2>Guidelines</h2>
       <p>If you are contributing to Vanilla, make sure to read and follow these guidelines.</p>
@@ -25,12 +25,12 @@ <h2>Guidelines</h2>
   </div>
 </div>
 <section class="p-strip is-dark">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <h2>Title</h2>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-6">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam</p>
@@ -43,7 +43,7 @@ <h2>Title</h2>
   </div>
 </section>
 <section class="p-strip is-bordered">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-4 p-card">
       <p class="p-card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
@@ -57,7 +57,7 @@ <h2>Title</h2>
         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <button class="p-button">Default button</button>
     </div>
@@ -67,7 +67,7 @@ <h2>Title</h2>
   <div class="row p-divider">
     <div class="col-9 p-divider__block">
       <h2>Latest news from Insights</h2>
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-3">
           <h3>Kernel Team Summary – September 13, 2017</h3>
           <p><time pubdate="" datetime="Wed, 13 Sep 2017 19:46:56 +0000">13 September 2017</time></p>
@@ -90,7 +90,7 @@ <h3>Why containers and automation are essential in a world being eaten by softwa
   </div>
 </section>
 <section class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-8">
       <h2>Manage your servers without leaving your seat</h2>
       <p>Use the Web <abbr title="User interface">UI</abbr> or the command line (<abbr
diff --git a/templates/docs/examples/utilities/align-by-baseline.html b/templates/docs/examples/utilities/align-by-baseline.html
index 65c104830..ba504bcff 100644
--- a/templates/docs/examples/utilities/align-by-baseline.html
+++ b/templates/docs/examples/utilities/align-by-baseline.html
@@ -2,7 +2,7 @@
 {% block title %}Align paragraph, small, extra small text by baseline{% endblock %}
 
 {% block content %}
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-2">
     <p>paragraph</p>
   </div>
diff --git a/templates/docs/examples/utilities/fixed-width-container-nesting.html b/templates/docs/examples/utilities/fixed-width-container-nesting.html
index 0afe17772..aa40cc4b7 100644
--- a/templates/docs/examples/utilities/fixed-width-container-nesting.html
+++ b/templates/docs/examples/utilities/fixed-width-container-nesting.html
@@ -9,14 +9,14 @@
 </div>
 
 <div class="u-fixed-width">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <code>row</code>  nested in <code>u-fixed-width</code> container should not add additional padding.
     </div>
   </div>
 </div>
 
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-12">
       <div class="u-fixed-width">
         <code>u-fixed-width</code> container nested in <code>row</code> should not add additional padding.
diff --git a/templates/docs/layouts/brochure.html b/templates/docs/layouts/brochure.html
index b01667092..dfda4d89e 100644
--- a/templates/docs/layouts/brochure.html
+++ b/templates/docs/layouts/brochure.html
@@ -44,7 +44,7 @@ <h1 class="p-heading--2 u-no-margin--bottom">
 </section>
 
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
   <div class="row--25-75">
@@ -76,7 +76,7 @@ <h2>Layouts</h2>
 </section>
 
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
   <div class="row--25-75">
@@ -105,7 +105,7 @@ <h3 class="p-muted-heading">The 25% rule</h3>
 </section>
 
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
   <div class="row--25-75">
@@ -123,7 +123,7 @@ <h3 class="p-muted-heading">Further considerations</h3>
 </section>
 
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
   <div class="row--25-75">
diff --git a/templates/docs/patterns/grid/index.md b/templates/docs/patterns/grid/index.md
index 85fe9cdcb..4ce10276b 100644
--- a/templates/docs/patterns/grid/index.md
+++ b/templates/docs/patterns/grid/index.md
@@ -6,7 +6,10 @@ context:
 
 ## Structure
 
-Vanilla has a responsive grid with the following columns and gutters:
+### Default grid
+
+The default grid uses the `.p-row` class. There are a multiple of 4 columns on every breakpoint.
+It has the following columns and gutters:
 
 <table>
   <thead>
@@ -25,13 +28,10 @@ Vanilla has a responsive grid with the following columns and gutters:
       <td>1.0rem</td>
     </tr>
     <tr>
-      <td rowspan="2"><code>$breakpoint-small</code> - <code>$breakpoint-large</code></td>
-      <td>6 (using <code>.row</code>)</td>
-      <td rowspan="2">2.0rem</td>
-      <td rowspan="2">1.5rem</td>
-    </tr>
-    <tr>
-      <td>4 (using <code>.row--4-cols-medium</code> - see <a href="#4-column-grid-on-medium-screens">docs</a>).</td>
+      <td><code>$breakpoint-small</code> - <code>$breakpoint-large</code></td>
+      <td>4</td>
+      <td>2.0rem</td>
+      <td>1.5rem</td>
     </tr>
     <tr>
       <td>Greater than <code>$breakpoint-large</code></td>
@@ -42,43 +42,68 @@ Vanilla has a responsive grid with the following columns and gutters:
   </tbody>
 </table>
 
-<br>
-
-- The page structure must be laid out using rows (`.row`)
-- All content must be within columns (`.col-*`)
-- Only columns should be direct children of a row
-
-Layouts can be created combining rows with different number of columns to an ideal maximum of 4 columns per row. Each
-column containing text should span a minimum of 3 columns.
-
-Read also: [Breakpoints](/docs/settings/breakpoint-settings)
-
 <div class="embedded-example"><a href="/docs/examples/patterns/grid/default/" class="js-example">
     View example of the default grid
 </a></div>
 
-## 4-column grid on medium screens
+### Legacy grid
 
-<div class="p-notification--positive">
+<div class="p-notification--caution">
   <div class="p-notification__content">
-    <h3 class="p-notification__title">New</h3>
-    <p class="p-notification__message">
-      Vanilla is moving towards a layout where each breakpoint has a multiple of 4 columns.<br>
-      The 6 column grid on medium screens is deprecated and should be replaced with the 4 column grid.<br>
-      The default <code>.row</code> class has 6 columns on medium screens, but this will be changed to 4 columns in v5.
-    </p>
+    <h5 class="p-notification__title">Deprecated</h5>
+    <span class="p-notification__message">The legacy grid has been deprecated. It will be removed in v5. Use the <a href="#default-grid">default grid</a> instead.</span>
   </div>
 </div>
 
-To use a multiple of 4 columns on every breakpoint, use the `.row--4-col` class at every level of grid nesting. The same
-`.col-*` classes can be used as in the default grid.
+The legacy grid uses the `.row` class. It behaves nearly the same as the [default grid](#default-grid),
+but it has 6 columns on medium screens instead of 4. It has the following columns and gutters:
 
-`.row--4-cols-medium` has the same grid behaviour as `.row` but with 4 columns on the medium breakpoint instead of 6.
+<table>
+  <thead>
+    <tr>
+      <th style="width: 50ch">Screen size (px)</th>
+      <th>Columns</th>
+      <th>Grid gap (gutters)</th>
+      <th>Outer margins</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Less than <code>$breakpoint-small</code></td>
+      <td>4</td>
+      <td>1.5rem</td>
+      <td>1.0rem</td>
+    </tr>
+    <tr>
+      <td><code>$breakpoint-small</code> - <code>$breakpoint-large</code></td>
+      <td>6</td>
+      <td>2.0rem</td>
+      <td>1.5rem</td>
+    </tr>
+    <tr>
+      <td>Greater than <code>$breakpoint-large</code></td>
+      <td>12</td>
+      <td>2.0rem</td>
+      <td>1.5rem</td>
+    </tr>
+  </tbody>
+</table>
 
-<div class="embedded-example"><a href="/docs/examples/patterns/grid/4-columns-medium-responsive" class="js-example">
-    View example of the 4-column grid
+<div class="embedded-example"><a href="/docs/examples/patterns/grid/legacy/" class="js-example">
+    View example of the legacy grid
 </a></div>
 
+### Guidelines
+
+- The page structure must be laid out using rows (`.p-row`)
+- All content must be within columns (`.col-*`)
+- Only columns should be direct children of a row
+
+Layouts can be created combining rows with different number of columns to an ideal maximum of 4 columns per row. Each
+column containing text should span a minimum of 3 columns.
+
+Read also: [Breakpoints](/docs/settings/breakpoint-settings)
+
 ## Common patterns
 
 On top of the regular row and column classes, we provide shortcut classes to help you
@@ -109,7 +134,7 @@ columns in a 50% container, etc). Specifying more columns than are available lea
     <h5 class="p-notification__title">Nesting</h5>
     <p class="p-notification__message">
       These common patterns are meant for top level rows only and are <strong>not intended to be nested</strong>. You should not nest <code>row--50-50</code> inside another column.
-      For nested rows, use the standard <code>.row--4-cols-medium</code> class, as described in <a href="#nested-columns">section about nested columns</a> later on this page.</p>
+      For nested rows, use the standard <code>.p-row</code> class, as described in <a href="#nested-columns">section about nested columns</a> later on this page.</p>
   </div>
 </div>
 
@@ -208,7 +233,7 @@ columns on medium screen, and stacking all 4 columns on top of each other on sma
 ## Fixed width containers
 
 If you only want to constrain content so it matches the grid's fixed width, you can use the utility `.u-fixed-width`. It
-behaves as a grid `.row--4-cols-medium` with a single 12 column container inside:
+behaves as a grid `.p-row` with a single 12 column container inside:
 
 <div class="embedded-example"><a href="/docs/examples/utilities/fixed-width-container/" class="js-example">
     View example of a fixed width container
@@ -216,10 +241,10 @@ behaves as a grid `.row--4-cols-medium` with a single 12 column container inside
 
 ## Nested columns
 
-Columns can be nested infinitely by adding `.row--4-cols-medium` classes within columns. When nesting, remember to:
+Columns can be nested infinitely by adding `.p-row` classes within columns. When nesting, remember to:
 
 - keep track of the context (available columns), which is equal to the number of columns spanned by the parent element.
-- Ensure `.col-*` classes are direct descendants of `.row--4-cols-medium` classes. Failing to do so will result in a
+- Ensure `.col-*` classes are direct descendants of `.p-row` classes. Failing to do so will result in a
   broken layout.
 
 <div class="embedded-example"><a href="/docs/examples/patterns/grid/4-columns-medium-nested-responsive/" class="js-example">
diff --git a/templates/docs/whats-new.html b/templates/docs/whats-new.html
index 8f26de1f8..e3b479d6b 100644
--- a/templates/docs/whats-new.html
+++ b/templates/docs/whats-new.html
@@ -86,7 +86,7 @@ <h2>Previously in Vanilla v4</h2>
 
 <h2>Status key</h2>
 
-<div class="row--4-cols-medium">
+<div class="p-row">
   <div class="col-3 u-equal-height">
     <div class="p-card--highlighted">
       <span class="p-status-label--positive">New</span>
diff --git a/templates/index.html b/templates/index.html
index 4bc4f948e..c196b4df2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -93,12 +93,12 @@ <h2 class="p-heading-icon__title">Open source</h2>
 </div>
 
 <div id="quick-start" class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <h2>Quick start</h2>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-6 col-medium-2">
       <p>The recommended method of including Vanilla Framework in your project is via <a href="https://www.npmjs.com/package/vanilla-framework">npm</a> or <a href="https://yarnpkg.com/package/vanilla-framework">yarn</a>. You can then simply include the framework in your SCSS files and compile.</p>
       <p>For other methods, please see the <a href="/docs">advanced usage docs.</a></p>
@@ -115,7 +115,7 @@ <h2>Quick start</h2>
 </div>
 
 <div class="p-strip">
-  <div class="row--4-cols-medium u-equal-height">
+  <div class="p-row u-equal-height">
     <div class="col-6 col-medium-2">
       <h2>Guidelines</h2>
       <p>If you are <a href="https://vanillaframework.io/contribute">contributing to Vanilla</a>, make sure to read and follow these guidelines.</p>
@@ -181,12 +181,12 @@ <h3 class="p-heading-icon__title">Vanilla Design</h3>
 </div>
 
 <div class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-4">
       <h2>Latest news from our blog</h2>
     </div>
     <div class="col-8">
-      <div id="articles" class="row--4-cols-medium">
+      <div id="articles" class="p-row">
         <p><i class="p-icon--spinner u-animation--spin"></i> Loading...</p>
       </div>
       <div class="u-fixed-width"><a href="https://ubuntu.com/blog/topics/design" class="p-button">View more from our blog</a></div>
@@ -277,7 +277,7 @@ <h3><a class="article-link article-title"></a></h3>
 </div>
 
 <div class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-3">
       <h2>Contribute</h2>
       <p><a class="github-button" href="https://github.com/canonical/vanilla-framework" data-size="large" data-show-count="true" aria-label="Follow @vanilla-framework on GitHub">Follow @vanilla-framework</a></p>