The justify-items property aligns grid items horizontally within their own individual grid cell, along the row/inline axis, applying to every item in the grid at once by default.

Syntax

justify-items: stretch | start | end | center;

Deep Dive Course

stretch, the default, stretches each item to fill its entire cell's width, while start, end, and center align the item within its cell without stretching it, sizing it instead according to its own natural content size. This is easily confused with justify-content, but the two operate at entirely different levels: justify-content distributes space between and positions the grid's tracks as a whole within the container, while justify-items instead aligns each individual item horizontally within the specific cell that item already occupies — the related justify-self property overrides justify-items' default for one single, individual item, mirroring how align-self overrides align-items in flexbox.

1Understanding Justify-items

💡

Don't confuse justify-items with justify-content — justify-items aligns each item within its own individual grid cell, while justify-content positions and distributes space around the grid's tracks as a whole within the container.

editor.html

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

localhost:3000

2Practical Example

Here is a real-world application of Justify-items showing how it is used in production CSS code.

editor.html

.grid {
  display: grid;
  justify-items: stretch;
}

.special-item {
  justify-self: end;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Justify-items:

1. Use justify-items: center, or start/end, when items should align to a specific side within their own cell, rather than stretching to fill it, the default

2. Use justify-self on an individual grid item for a targeted alignment exception, rather than changing the whole grid's justify-items setting

3. Remember justify-items operates on items within their own cells, distinct from justify-content, which positions the grid's tracks as a whole within the container

⚠️

Tip: Don't confuse justify-items with justify-content — justify-items aligns each item within its own individual grid cell, while justify-content positions and distributes space around the grid's tracks as a whole within the container.

editor.html

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

localhost:3000

Examples

Example 01Basic Usage

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

Example 02Advanced Example

.grid {
  display: grid;
  justify-items: stretch;
}

.special-item {
  justify-self: end;
}

Best Practices

Use justify-items: center, or start/end, when items should align to a specific side within their own cell, rather than stretching to fill it, the default
Use justify-self on an individual grid item for a targeted alignment exception, rather than changing the whole grid's justify-items setting
Remember justify-items operates on items within their own cells, distinct from justify-content, which positions the grid's tracks as a whole within the container

Interview Question

Why are justify-items and justify-content easy to confuse, and what's the actual, fundamental difference in what each one aligns?▼

Hint: Think about the two distinct things a grid layout involves — the grid's own tracks (rows and columns) as a whole, versus the individual items sitting inside their own specific cells.

Both properties share the word justify and both relate to horizontal alignment along the same inline axis, which is exactly why they're so commonly confused, but they operate at two genuinely different levels of the grid layout: justify-content controls how the grid's own tracks, its columns as a collective whole, are positioned and spaced within the grid container's total available width, which only has a visible effect when the grid's defined tracks don't already fill the container's entire width. justify-items, by contrast, has nothing to do with positioning the tracks themselves, it instead controls how each individual item is aligned specifically within the one particular cell that item already occupies, which matters independently of whether the tracks fill the full container width or not, since even a container fully occupied by its tracks can still have individual items that are smaller than their own specific cell and need alignment within it. This distinction, aligning the tracks as a group within the container versus aligning items within their own individual cells, is exactly the difference that the shared justify- naming, unfortunately, doesn't make immediately obvious.

Exercises

MediumPractice using Justify-items in a real scenario.

View Solution

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

Frequently Asked Questions

Why are justify-items and justify-content easy to confuse, and what's the actual, fundamental difference in what each one aligns?▼

Related Functions

Justify-contentAlign-itemsGrid-template-columns