diff --git a/.changeset/sixty-masks-matter.md b/.changeset/sixty-masks-matter.md
new file mode 100644
index 00000000..8b2ec3dc
--- /dev/null
+++ b/.changeset/sixty-masks-matter.md
@@ -0,0 +1,7 @@
+---
+"@primer/css": minor
+---
+
+Adding directional margin classes to the margin utilities. 
+
+Adding: `ml-auto, mb-auto, mr-auto`
diff --git a/docs/content/utilities/margin.md b/docs/content/utilities/margin.md
index c6687422..3653a501 100644
--- a/docs/content/utilities/margin.md
+++ b/docs/content/utilities/margin.md
@@ -91,6 +91,20 @@ Use `mx-auto`to center block elements with a set width.
 </div>
 ```
 
+We also provide directional margin auto. `mt-auto, mr-auto, mb-auto, ml-auto`
+
+```html live
+<div class="d-flex border mb-4">
+  <div style="height:100px;"></div>
+  <div class="border mt-auto">`mt-auto` will push this box to the bottom.</div>
+  <div class="border mb-auto">`mb-auto` will push this box to the top.</div>
+</div>
+<div class="d-flex flex-column border">
+  <div class="border ml-auto">`ml-auto` will push this box to the right.</div>
+  <div class="border mr-auto">`mr-auto` will push this box to the left.</div>
+</div>
+```
+
 ## Reset margins
 Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
 
diff --git a/src/utilities/margin.scss b/src/utilities/margin.scss
index 564e9837..42882360 100644
--- a/src/utilities/margin.scss
+++ b/src/utilities/margin.scss
@@ -63,3 +63,6 @@
 .m-auto { margin: auto !important; }
 
 .mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }