From 515c1c7dc580f4a872dd43c9a0fdf3ce14d9bb4a Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Tue, 25 Oct 2022 11:35:54 -0400
Subject: [PATCH 1/7] Update `Columns` docs

---
 .changeset/rich-cooks-attend.md               |  5 ++
 .../content/components/columns.md             | 23 +++++--
 .../pages/examples/columns-default.tsx        | 46 ++++++++++---
 .../examples/columns-with-fixed-widths.tsx    | 45 +++++++++++++
 .../columns-with-free-and-fixed-widths.tsx    | 24 -------
 .../examples/columns-with-set-number.tsx      | 67 +++++++++++++++++++
 .../examples/columns-with-varying-spacing.tsx | 61 ++++++++++++++---
 7 files changed, 222 insertions(+), 49 deletions(-)
 create mode 100644 .changeset/rich-cooks-attend.md
 create mode 100644 polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
 delete mode 100644 polaris.shopify.com/pages/examples/columns-with-free-and-fixed-widths.tsx
 create mode 100644 polaris.shopify.com/pages/examples/columns-with-set-number.tsx

diff --git a/.changeset/rich-cooks-attend.md b/.changeset/rich-cooks-attend.md
new file mode 100644
index 00000000000..53d5e5ca698
--- /dev/null
+++ b/.changeset/rich-cooks-attend.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Update `Columns` component docs
diff --git a/polaris.shopify.com/content/components/columns.md b/polaris.shopify.com/content/components/columns.md
index 980268c77f5..95b7f6545de 100644
--- a/polaris.shopify.com/content/components/columns.md
+++ b/polaris.shopify.com/content/components/columns.md
@@ -1,6 +1,6 @@
 ---
 title: Columns
-description: Use to lay out a vertical row of components with equal spacing between and wrapping onto multiple lines.
+description: Displays content horizontally in one or more columns with equal spacing between.
 category: Structure
 keywords:
   - layout
@@ -10,8 +10,23 @@ status:
 examples:
   - fileName: columns-default.tsx
     title: Default
+    description: >-
+      By default, there are 6 columns with 16px spacing between them.
   - fileName: columns-with-varying-spacing.tsx
-    title: With varying spacing
-  - fileName: columns-with-free-and-fixed-widths.tsx
-    title: With free and fixed widths
+    title: Spacing
+    description: >-
+      Use the spacing prop to set the amount of space between columns.
+  - fileName: columns-with-fixed-widths.tsx
+    title: Column width
+    description: >-
+      Individual column width can be adjusted.
+  - fileName: columns-with-set-number.tsx
+    title: Number of columns
+    description: >-
+      Use the columns prop to set the number and width of columns across breakpoints.
 ---
+
+## Related components
+
+- For more control over padding and widths, use the [Box](https://polaris.shopify.com/components/box) component
+- To lay out a set of smaller components horizontally, use the [Inline](https://polaris.shopify.com/components/inline) component
diff --git a/polaris.shopify.com/pages/examples/columns-default.tsx b/polaris.shopify.com/pages/examples/columns-default.tsx
index d7aabf7dbec..158c79c739a 100644
--- a/polaris.shopify.com/pages/examples/columns-default.tsx
+++ b/polaris.shopify.com/pages/examples/columns-default.tsx
@@ -1,21 +1,45 @@
 import React from 'react';
-import {Columns} from '@shopify/polaris';
+import {Columns, Text, Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function ColumnsExample() {
   return (
-    <div style={{width: '100%'}}>
-      <Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} spacing={{xs: '2'}}>
-        <div style={{background: 'var(--p-surface-success)'}}>Column one</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column two</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column three</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column four</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column five</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column six</div>
-      </Columns>
-    </div>
+    <Columns>
+      <Placeholder height="320px" label="01" />
+      <Placeholder height="320px" label="02" />
+      <Placeholder height="320px" label="03" />
+      <Placeholder height="320px" label="04" />
+      <Placeholder height="320px" label="05" />
+      <Placeholder height="320px" label="06" />
+    </Columns>
   );
 }
 
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        display: 'inherit',
+        background: '#7B47F1',
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    >
+      <Inline align={'center'} alignY={'center'}>
+        <div
+          style={{
+            color: '#FFFFFF',
+            width: width ?? undefined,
+          }}
+        >
+          <Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
+            {label}
+          </Text>
+        </div>
+      </Inline>
+    </div>
+  );
+};
+
 export default withPolarisExample(ColumnsExample);
diff --git a/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx b/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
new file mode 100644
index 00000000000..6ac930a3b94
--- /dev/null
+++ b/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {Columns, Text, Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function ColumnsWithFreeAndFixedWidthsExample() {
+  return (
+    <Columns columns={{xs: '2.5fr 1fr 1fr 1fr 1fr 1fr'}}>
+      <Placeholder height="320px" label="01" />
+      <Placeholder height="320px" label="02" />
+      <Placeholder height="320px" label="03" />
+      <Placeholder height="320px" label="04" />
+      <Placeholder height="320px" label="05" />
+      <Placeholder height="320px" label="06" />
+    </Columns>
+  );
+}
+
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        display: 'inherit',
+        background: '#7B47F1',
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    >
+      <Inline align={'center'} alignY={'center'}>
+        <div
+          style={{
+            color: '#FFFFFF',
+            width: width ?? undefined,
+          }}
+        >
+          <Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
+            {label}
+          </Text>
+        </div>
+      </Inline>
+    </div>
+  );
+};
+
+export default withPolarisExample(ColumnsWithFreeAndFixedWidthsExample);
diff --git a/polaris.shopify.com/pages/examples/columns-with-free-and-fixed-widths.tsx b/polaris.shopify.com/pages/examples/columns-with-free-and-fixed-widths.tsx
deleted file mode 100644
index 6852bde8877..00000000000
--- a/polaris.shopify.com/pages/examples/columns-with-free-and-fixed-widths.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import {Columns} from '@shopify/polaris';
-
-import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
-
-function ColumnsWithFreeAndFixedWidthsExample() {
-  return (
-    <div style={{width: '90vw'}}>
-      <Columns
-        columns={{xs: 2, sm: '2fr 1fr', md: '2fr 1fr 1fr', lg: 6}}
-        spacing={{xs: '2'}}
-      >
-        <div style={{background: 'var(--p-surface-success)'}}>Column one</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column two</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column three</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column four</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column five</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column six</div>
-      </Columns>
-    </div>
-  );
-}
-
-export default withPolarisExample(ColumnsWithFreeAndFixedWidthsExample);
diff --git a/polaris.shopify.com/pages/examples/columns-with-set-number.tsx b/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
new file mode 100644
index 00000000000..5e110c2af9e
--- /dev/null
+++ b/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {Columns, Text, Inline} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function ColumnsWithSetNumberExample() {
+  return (
+    <SpacingBackground>
+      <Columns
+        columns={{
+          xs: '3fr 3fr',
+          md: '4fr 2fr',
+        }}
+        spacing={{
+          xs: '4',
+          md: '2',
+        }}
+      >
+        <Placeholder height="320px" label="01" />
+        <Placeholder height="320px" label="02" />
+      </Columns>
+    </SpacingBackground>
+  );
+}
+
+const SpacingBackground = ({children, width = '100%'}) => {
+  return (
+    <div
+      style={{
+        background:
+          'repeating-linear-gradient(-45deg, #7B47F1, #7B47F1 1px, #E8D1FA 1px, #E8D1FA 7px)',
+        width: width ?? undefined,
+        height: 'auto',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        display: 'inherit',
+        background: '#7B47F1',
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    >
+      <Inline align={'center'} alignY={'center'}>
+        <div
+          style={{
+            color: '#FFFFFF',
+            width: width ?? undefined,
+          }}
+        >
+          <Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
+            {label}
+          </Text>
+        </div>
+      </Inline>
+    </div>
+  );
+};
+
+export default withPolarisExample(ColumnsWithSetNumberExample);
diff --git a/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx b/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx
index e164f28a4b6..ee73335be15 100644
--- a/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx
+++ b/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx
@@ -1,21 +1,62 @@
 import React from 'react';
-import {Columns} from '@shopify/polaris';
+import {Columns, Text, Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function ColumnsWithVaryingGapExample() {
   return (
-    <div style={{width: '100%'}}>
-      <Columns
-        columns={{xs: 3}}
-        spacing={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
-      >
-        <div style={{background: 'var(--p-surface-success)'}}>Column one</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column two</div>
-        <div style={{background: 'var(--p-surface-success)'}}>Column three</div>
+    <SpacingBackground>
+      <Columns spacing={{xs: '2'}}>
+        <Placeholder height="320px" label="01" />
+        <Placeholder height="320px" label="02" />
+        <Placeholder height="320px" label="03" />
+        <Placeholder height="320px" label="04" />
+        <Placeholder height="320px" label="05" />
+        <Placeholder height="320px" label="06" />
       </Columns>
-    </div>
+    </SpacingBackground>
   );
 }
 
+const SpacingBackground = ({children, width = '100%'}) => {
+  return (
+    <div
+      style={{
+        background:
+          'repeating-linear-gradient(-45deg, #7B47F1, #7B47F1 1px, #E8D1FA 1px, #E8D1FA 7px)',
+        width: width ?? undefined,
+        height: 'auto',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        display: 'inherit',
+        background: '#7B47F1',
+        height: height ?? undefined,
+        width: width ?? undefined,
+      }}
+    >
+      <Inline align={'center'} alignY={'center'}>
+        <div
+          style={{
+            color: '#FFFFFF',
+            width: width ?? undefined,
+          }}
+        >
+          <Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
+            {label}
+          </Text>
+        </div>
+      </Inline>
+    </div>
+  );
+};
+
 export default withPolarisExample(ColumnsWithVaryingGapExample);

From 77776c339b42512e64efcd7763d0aa5be2b3b80c Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:41:55 +0200
Subject: [PATCH 2/7] Update polaris.shopify.com/content/components/columns.md

Co-authored-by: Sara Hill <sara.hill@shopify.com>
---
 polaris.shopify.com/content/components/columns.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/content/components/columns.md b/polaris.shopify.com/content/components/columns.md
index 95b7f6545de..782851fca87 100644
--- a/polaris.shopify.com/content/components/columns.md
+++ b/polaris.shopify.com/content/components/columns.md
@@ -28,5 +28,5 @@ examples:
 
 ## Related components
 
-- For more control over padding and widths, use the [Box](https://polaris.shopify.com/components/box) component
+- For more control over padding and widths, [use the Box](https://polaris.shopify.com/components/box) component
 - To lay out a set of smaller components horizontally, use the [Inline](https://polaris.shopify.com/components/inline) component

From b118f15f6bca7302d9be5b1a979865845a478e41 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Wed, 26 Oct 2022 16:42:01 +0200
Subject: [PATCH 3/7] Update polaris.shopify.com/content/components/columns.md

Co-authored-by: Sara Hill <sara.hill@shopify.com>
---
 polaris.shopify.com/content/components/columns.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/content/components/columns.md b/polaris.shopify.com/content/components/columns.md
index 782851fca87..d35ea1b6299 100644
--- a/polaris.shopify.com/content/components/columns.md
+++ b/polaris.shopify.com/content/components/columns.md
@@ -29,4 +29,4 @@ examples:
 ## Related components
 
 - For more control over padding and widths, [use the Box](https://polaris.shopify.com/components/box) component
-- To lay out a set of smaller components horizontally, use the [Inline](https://polaris.shopify.com/components/inline) component
+- To lay out a set of smaller components horizontally, [use the Inline](https://polaris.shopify.com/components/inline) component

From a614739a6f8183b5704ba7d009e2719d8d8e47f4 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 28 Oct 2022 15:05:51 +0200
Subject: [PATCH 4/7] Update
 polaris.shopify.com/pages/examples/columns-default.tsx

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 polaris.shopify.com/pages/examples/columns-default.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/pages/examples/columns-default.tsx b/polaris.shopify.com/pages/examples/columns-default.tsx
index 158c79c739a..f5754a1423e 100644
--- a/polaris.shopify.com/pages/examples/columns-default.tsx
+++ b/polaris.shopify.com/pages/examples/columns-default.tsx
@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align={'center'} alignY={'center'}>
+      <Inline align="center" alignY="center">
         <div
           style={{
             color: '#FFFFFF',

From 900ac31073a7977cbd2b99bac838c0218347d736 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 28 Oct 2022 15:06:03 +0200
Subject: [PATCH 5/7] Update
 polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 .../pages/examples/columns-with-fixed-widths.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx b/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
index 6ac930a3b94..a26f6491348 100644
--- a/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
+++ b/polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx
@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align={'center'} alignY={'center'}>
+      <Inline align="center" alignY="center">
         <div
           style={{
             color: '#FFFFFF',

From c5e2cc12ae39d1a56efe73a1819c43db9c33bd97 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 28 Oct 2022 15:06:08 +0200
Subject: [PATCH 6/7] Update
 polaris.shopify.com/pages/examples/columns-with-set-number.tsx

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 polaris.shopify.com/pages/examples/columns-with-set-number.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/pages/examples/columns-with-set-number.tsx b/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
index 5e110c2af9e..8afd0254db0 100644
--- a/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
+++ b/polaris.shopify.com/pages/examples/columns-with-set-number.tsx
@@ -48,7 +48,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align={'center'} alignY={'center'}>
+      <Inline align="center" alignY="center">
         <div
           style={{
             color: '#FFFFFF',

From 60b561bf3bca4a6abf2a840eee5a60580954facb Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 28 Oct 2022 15:06:19 +0200
Subject: [PATCH 7/7] Update
 polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 .../pages/examples/columns-with-varying-spacing.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx b/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx
index ee73335be15..0efdfdce794 100644
--- a/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx
+++ b/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx
@@ -43,7 +43,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align={'center'} alignY={'center'}>
+      <Inline align="center" alignY="center">
         <div
           style={{
             color: '#FFFFFF',