diff --git a/.changeset/warm-taxes-show.md b/.changeset/warm-taxes-show.md
new file mode 100644
index 0000000000..edebd0048e
--- /dev/null
+++ b/.changeset/warm-taxes-show.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using <Grid.Root /> instead of just <Grid />.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index f49148da7a..bce8e71a6c 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -195,20 +195,20 @@
 
 .canon-Container {
   max-width: 120rem;
-  padding: 0 var(--canon-space-4);
-  margin: 0 auto;
+  padding-inline: var(--canon-space-4);
+  margin-inline: auto;
   transition: padding .2s ease-in-out;
 }
 
 @media (width >= 640px) {
   .canon-Container {
-    padding: 0 var(--canon-space-8);
+    padding-inline: var(--canon-space-8);
   }
 }
 
 @media (width >= 1024px) {
   .canon-Container {
-    padding: 0 var(--canon-space-12);
+    padding-inline: var(--canon-space-12);
   }
 }
 
diff --git a/packages/canon/css/container.css b/packages/canon/css/container.css
index 4ba6b65dee..47744cce1e 100644
--- a/packages/canon/css/container.css
+++ b/packages/canon/css/container.css
@@ -1,18 +1,18 @@
 .canon-Container {
   max-width: 120rem;
-  padding: 0 var(--canon-space-4);
-  margin: 0 auto;
+  padding-inline: var(--canon-space-4);
+  margin-inline: auto;
   transition: padding .2s ease-in-out;
 }
 
 @media (width >= 640px) {
   .canon-Container {
-    padding: 0 var(--canon-space-8);
+    padding-inline: var(--canon-space-8);
   }
 }
 
 @media (width >= 1024px) {
   .canon-Container {
-    padding: 0 var(--canon-space-12);
+    padding-inline: var(--canon-space-12);
   }
 }
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 2f24ff043a..3107c83908 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9419,20 +9419,20 @@
 
 .canon-Container {
   max-width: 120rem;
-  padding: 0 var(--canon-space-4);
-  margin: 0 auto;
+  padding-inline: var(--canon-space-4);
+  margin-inline: auto;
   transition: padding .2s ease-in-out;
 }
 
 @media (width >= 640px) {
   .canon-Container {
-    padding: 0 var(--canon-space-8);
+    padding-inline: var(--canon-space-8);
   }
 }
 
 @media (width >= 1024px) {
   .canon-Container {
-    padding: 0 var(--canon-space-12);
+    padding-inline: var(--canon-space-12);
   }
 }
 
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index f5f4042776..bc0ad71e90 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -453,9 +453,8 @@ export type GetPropDefTypes<P> = {
 };
 
 // @public (undocumented)
-export const Grid: ForwardRefExoticComponent<
-  GridProps & RefAttributes<HTMLDivElement>
-> & {
+export const Grid: {
+  Root: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
   Item: ForwardRefExoticComponent<
     GridItemProps & RefAttributes<HTMLDivElement>
   >;