diff --git a/docs/src/pages/framed/Grid/AspectRatioColumns.svelte b/docs/src/pages/framed/Grid/AspectRatioColumns.svelte
index 6c211f58..2871e2f9 100644
--- a/docs/src/pages/framed/Grid/AspectRatioColumns.svelte
+++ b/docs/src/pages/framed/Grid/AspectRatioColumns.svelte
@@ -4,17 +4,7 @@
 
 <Grid>
   <Row>
-    <Column
-      aspectRatio="2x1"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      2x1
-    </Column>
-    <Column
-      aspectRatio="2x1"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      2x1
-    </Column>
+    <Column aspectRatio="2x1">2x1</Column>
+    <Column aspectRatio="2x1">2x1</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/Grid/CondensedGrid.svelte b/docs/src/pages/framed/Grid/CondensedGrid.svelte
index f50e02a0..df3d5e04 100644
--- a/docs/src/pages/framed/Grid/CondensedGrid.svelte
+++ b/docs/src/pages/framed/Grid/CondensedGrid.svelte
@@ -4,9 +4,9 @@
 
 <Grid condensed>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/Grid/FullWidthGrid.svelte b/docs/src/pages/framed/Grid/FullWidthGrid.svelte
index 2c5bab77..3a67a3e2 100644
--- a/docs/src/pages/framed/Grid/FullWidthGrid.svelte
+++ b/docs/src/pages/framed/Grid/FullWidthGrid.svelte
@@ -4,9 +4,9 @@
 
 <Grid fullWidth>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/Grid/Grid.svelte b/docs/src/pages/framed/Grid/Grid.svelte
index 334dda25..daf91948 100644
--- a/docs/src/pages/framed/Grid/Grid.svelte
+++ b/docs/src/pages/framed/Grid/Grid.svelte
@@ -4,9 +4,9 @@
 
 <Grid>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/Grid/NarrowGrid.svelte b/docs/src/pages/framed/Grid/NarrowGrid.svelte
index 1f38bb2c..b7ab56aa 100644
--- a/docs/src/pages/framed/Grid/NarrowGrid.svelte
+++ b/docs/src/pages/framed/Grid/NarrowGrid.svelte
@@ -4,9 +4,9 @@
 
 <Grid narrow>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/Grid/OffsetColumns.svelte b/docs/src/pages/framed/Grid/OffsetColumns.svelte
index c961ffd5..3aa8f1c6 100644
--- a/docs/src/pages/framed/Grid/OffsetColumns.svelte
+++ b/docs/src/pages/framed/Grid/OffsetColumns.svelte
@@ -4,29 +4,9 @@
 
 <Grid>
   <Row>
-    <Column
-      sm="{{ span: 1, offset: 3 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 3
-    </Column>
-    <Column
-      sm="{{ span: 2, offset: 2 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 2
-    </Column>
-    <Column
-      sm="{{ span: 3, offset: 1 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 1
-    </Column>
-    <Column
-      sm="{{ span: 4, offset: 0 }}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      Offset 0
-    </Column>
+    <Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column>
+    <Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column>
+    <Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column>
+    <Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/Grid/PaddedGrid.svelte b/docs/src/pages/framed/Grid/PaddedGrid.svelte
index 5d3f8abd..17686bcc 100644
--- a/docs/src/pages/framed/Grid/PaddedGrid.svelte
+++ b/docs/src/pages/framed/Grid/PaddedGrid.svelte
@@ -2,28 +2,48 @@
   import { Grid, Row, Column } from "carbon-components-svelte";
 </script>
 
-<Grid narrow padding>
+<div>Adding padding to Grid applies it to all child columns:</div>
+
+<Grid padding>
   <Row>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>
 
-<Grid narrow>
+<div>Adding padding to a Row only applies its child columns:</div>
+
+<Grid>
   <Row padding>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
   </Row>
   <Row>
-    <Column padding style="outline: 1px solid var(--cds-interactive-04)">
-      Column
-    </Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
-    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
   </Row>
 </Grid>
+
+<div>Adding padding to a specific column only applies it to the column:</div>
+
+<Grid>
+  <Row>
+    <Column padding>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+    <Column>Column</Column>
+  </Row>
+</Grid>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+    padding: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/Grid/ResponsiveGrid.svelte b/docs/src/pages/framed/Grid/ResponsiveGrid.svelte
index e12cc685..a60004b4 100644
--- a/docs/src/pages/framed/Grid/ResponsiveGrid.svelte
+++ b/docs/src/pages/framed/Grid/ResponsiveGrid.svelte
@@ -4,37 +4,9 @@
 
 <Grid>
   <Row>
-    <Column
-      sm="{1}"
-      md="{4}"
-      lg="{8}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      sm: 1, md: 4, lg: 8
-    </Column>
-    <Column
-      sm="{1}"
-      md="{2}"
-      lg="{2}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      sm: 1, md: 2, lg: 2
-    </Column>
-    <Column
-      sm="{1}"
-      md="{1}"
-      lg="{1}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      sm: 1, md: 1, lg: 1
-    </Column>
-    <Column
-      sm="{1}"
-      md="{1}"
-      lg="{1}"
-      style="outline: 1px solid var(--cds-interactive-04)"
-    >
-      sm: 1, md: 1, lg: 1
-    </Column>
+    <Column sm="{1}" md="{4}" lg="{8}">sm: 1, md: 4, lg: 8</Column>
+    <Column sm="{1}" md="{2}" lg="{2}">sm: 1, md: 2, lg: 2</Column>
+    <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
+    <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
   </Row>
 </Grid>
diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index 200411bb..8695b114 100644
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@@ -21,4 +21,8 @@
     width: 100%;
     padding: var(--cds-spacing-06) var(--cds-spacing-05);
   }
+
+  :global(.framed [class^="bx--col"]) {
+    outline: 1px solid var(--cds-interactive-04);
+  }
 </style>
diff --git a/tests/AspectRatio.test.svelte b/tests/AspectRatio.test.svelte
index 16a8e0d5..e6cfbdff 100644
--- a/tests/AspectRatio.test.svelte
+++ b/tests/AspectRatio.test.svelte
@@ -2,34 +2,6 @@
   import { AspectRatio, Tile } from "../types";
 </script>
 
-<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
-  2x1
-</AspectRatio>
-
-<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
-  16x9
-</AspectRatio>
-
-<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
-  4x3
-</AspectRatio>
-
-<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
-  1x1
-</AspectRatio>
-
-<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
-  3x4
-</AspectRatio>
-
-<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
-  9x16
-</AspectRatio>
-
-<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
-  1x2
-</AspectRatio>
-
 <AspectRatio ratio="16x9">
   <Tile style="height: 100%">Content</Tile>
 </AspectRatio>