---
title: "Grid Justify Content | @grid"
description: "Align grid items along inline-axis."
keywords: ["grid", "justify", "align", "layout"]
---

# Justify Grid Content

Align grid items along inline-axis.

Usage:

- `@grid justify-*;`
- `@grid justify-items-*;`
- `@grid justify-self-*;`

<Alert variant="info">

This page contains only the **property configuration reference**. Complete
documentation and usage examples will be added progressively in future updates.

</Alert>

---

<section>

## Reference

```js title="shilp.config.js"
const shilpConfig = {
	source: "react",

	properties: {
		grid: {
			justify: {
				DEFAULT: {
					property: "justify-content: <v><i>;",
					values: {
						start: "start",
						center: "center",
						end: "end",
						stretch: "stretch",
						between: "space-between",
						around: "space-around",
						evenly: "space-evenly",
					},
				},

				items: {
					property: "justify-items: <v><i>;",
					values: {
						start: "start",
						center: "center",
						end: "end",
						stretch: "stretch",
					},
				},

				self: {
					property: "justify-self: <v><i>;",
					values: {
						start: "start",
						center: "center",
						end: "end",
						stretch: "stretch",
					},
				},
			},
		},
	},
};

export default shilpConfig;
```

</section>