...
-```
-
-...
-```
-
-...
-```
-
-...
-```
-
-...
-```
-
-Responsive variations also exist for `align-content`.
-
-...
-...
-...
-...
-```
-
-Responsive variations also exist for `justify-items`.
-
-...
-...
-...
-...
-```
-
-Responsive variations also exist for `place-items`.
-
-
-
-
- This is some content from a media component. You can replace this with any content and adjust it as needed.
-
- `} />
-
-And say you want to vertically center the content next to the image:
-
-
-
-
- This is some content from a media component. You can replace this with any content and adjust it as needed.
-
- `} />
-
## CSS
### Sass utilities API
-Flexbox and CSS Grid utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
diff --git a/site/src/content/docs/utilities/justify-content.mdx b/site/src/content/docs/utilities/justify-content.mdx
new file mode 100644
index 0000000000..e61fe278d7
--- /dev/null
+++ b/site/src/content/docs/utilities/justify-content.mdx
@@ -0,0 +1,96 @@
+---
+title: Justify content
+description: Use justify-content utilities to change the alignment of flex items on the main axis.
+toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+---
+
+import { getData } from '@libs/data'
+
+## Overview
+
+Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
+
+## Basic usage
+
+
+
+
Justify
+
Content
+
Start
+
+
+
Justify
+
Content
+
End
+
+
+
Justify
+
Content
+
Center
+
+
+
Justify
+
Content
+
Between
+
+
+
Justify
+
Content
+
Around
+
+
+
Justify
+
Content
+
Evenly
+
+
...
+...
+...
+...
+...
+...
+```
+
+## Responsive
+
+Responsive variations also exist for `justify-content`.
+
+
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .justify-content{breakpoint.abbr}-start.justify-content{breakpoint.abbr}-end.justify-content{breakpoint.abbr}-center.justify-content{breakpoint.abbr}-between.justify-content{breakpoint.abbr}-around.justify-content{breakpoint.abbr}-evenly
+
+## CSS
+
+### Sass utilities API
+
+Justify content utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+```scss
+"justify-content": (
+ responsive: true,
+ property: justify-content,
+ values: (
+ start: flex-start,
+ end: flex-end,
+ center: center,
+ between: space-between,
+ around: space-around,
+ evenly: space-evenly,
+ )
+),
+```
diff --git a/site/src/content/docs/utilities/justify-items.mdx b/site/src/content/docs/utilities/justify-items.mdx
new file mode 100644
index 0000000000..0540a4b2f5
--- /dev/null
+++ b/site/src/content/docs/utilities/justify-items.mdx
@@ -0,0 +1,82 @@
+---
+title: Justify items
+description: Use justify-items utilities to control the alignment of grid items along the inline axis (horizontally, in most writing modes).
+toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
+---
+
+import { getData } from '@libs/data'
+
+## Overview
+
+Use `justify-items` utilities on CSS Grid containers to change the alignment of grid items along the inline (row) axis. This property controls how grid items are positioned horizontally within their grid areas.
+
+## Basic usage
+
+Use `justify-items` utilities to control the horizontal alignment of grid items. Choose from `start`, `end`, `center`, or `stretch` (browser default).
+
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
...
+...
+...
+...
+```
+
+## Responsive
+
+Responsive variations also exist for `justify-items`.
+
+
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .justify-items{breakpoint.abbr}-start.justify-items{breakpoint.abbr}-end.justify-items{breakpoint.abbr}-center.justify-items{breakpoint.abbr}-stretch
+
+## CSS
+
+### Sass utilities API
+
+Justify items utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+```scss
+"justify-items": (
+ responsive: true,
+ property: justify-items,
+ values: (
+ start: start,
+ end: end,
+ center: center,
+ stretch: stretch,
+ )
+),
+```
diff --git a/site/src/content/docs/utilities/place-items.mdx b/site/src/content/docs/utilities/place-items.mdx
new file mode 100644
index 0000000000..87413eb8ae
--- /dev/null
+++ b/site/src/content/docs/utilities/place-items.mdx
@@ -0,0 +1,82 @@
+---
+title: Place items
+description: Use place-items utilities to control the alignment of grid items within their grid areas on both the block and inline axes simultaneously.
+toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
+---
+
+import { getData } from '@libs/data'
+
+## Overview
+
+Use `place-items` utilities on CSS Grid containers as a shorthand to set both `align-items` and `justify-items` at once. This property controls how grid items are positioned within their grid areas on both axes.
+
+## Basic usage
+
+Use `place-items` utilities to control the alignment of grid items. Choose from `start`, `end`, `center`, or `stretch` (browser default).
+
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
+
Grid item
+
Grid item
+
Grid item
+
+
...
+...
+...
+...
+```
+
+## Responsive
+
+Responsive variations also exist for `place-items`.
+
+
+{getData('breakpoints').map((breakpoint) => {
+ return (
+
+ .place-items{breakpoint.abbr}-start.place-items{breakpoint.abbr}-end.place-items{breakpoint.abbr}-center.place-items{breakpoint.abbr}-stretch
+
+## CSS
+
+### Sass utilities API
+
+Place items utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+```scss
+"place-items": (
+ responsive: true,
+ property: place-items,
+ values: (
+ start: start,
+ end: end,
+ center: center,
+ stretch: stretch,
+ )
+),
+```