justify-items is a property applied to a Grid Container (an element with display: grid). It controls the default alignment of all children within their respective grid cells.

System Check

Where do you apply justify-items?

On the grid items (children)On the grid container (parent)On the body tagOn inline elements only

Community Holo-Net

Share Layouts

Created a complex grid system? Share your alignment patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS justify-items Property

Pascual Vila

Frontend Instructor.

The justify-items property aligns grid items along the inline (row) axis. It applies to grid containers and defines the default justify-self for all child items.

Common Values

stretch (Default): Items fill the width of the cell.
start: Items align to the start edge (left in LTR).
end: Items align to the end edge (right in LTR).
center: Items align to the center.

Justify-Items vs Align-Items

justify-items controls alignment on the horizontal (inline) axis.

align-items controls alignment on the vertical (block) axis.

Best Practices

Use justify-items on the parent container to set a global alignment for all children. If you need a specific child to differ, use justify-self on that specific item.

Justify Items Glossary

Inline Axis: The axis running horizontally (in standard layouts), corresponding to the direction of text flow. justify-items controls this.
justify-items: center: Centers the item horizontally within its grid cell.
justify-items: stretch: The default value. Items stretch to fill the entire width of the cell.
justify-self: A property used on individual grid items to override the justify-items value set on the container.

📖 INDEX

Grid Mastery Tree

Concept 1: Grid Context