justify-items | CSS-Tricks

CSS Almanac → Properties → J → justify-items

Mohit Khare on Dec 2, 2020 (Updated on Mar 2, 2021)

The justify-items property is a sub-property of the CSS Box Alignment Module which basically controls the alignment of grid items within their scope.

.element {
  justify-items: center;
}

justify-items aligns grid items along the row (inline) axis. Specifically, this property allows you to set alignment for items inside a grid container (not the grid itself) in a specific position (e.g. start, center and end) or with a behavior (e.g. auto or stretch).

When justify-items is used, it also sets the default justify-self value for all grid items, though this can be overridden at the child level by using the justify-self property on the child itself.

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

.grid-item {
  justify-self: start;
}

Syntax

justify-items: normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]

Initial value: legacy
Applies to: all elements
Inherited: no
Computed value: as specified
Animation type: discrete

Values

/* Basic keyword values */
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/* Baseline alignment */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* Positional alignment */
justify-items: center;
justify-items: start;
justify-items: end;
justify-items: flex-start;
justify-items: flex-end;
justify-items: self-start;
justify-items: self-end;
justify-items: left;
justify-items: right;

/* Overflow alignment */
/* Used as an optional second value for positional alignment */
justify-items: safe;
justify-items: unsafe;

/* Legacy */
justify-items: legacy center;
justify-items: legacy left;
justify-items: legacy right;

/* Global values */
justify-items: inherit;
justify-items: initial;
justify-items: unset;

Basic keyword values

stretch: Default value. Aligns items to fill the whole width of the grid item cell
auto: same as value of justify-items in parent.
normal: While we see justify-items used most often in a grid layout, it is technically for any box alignment and normal means different things in different layout context, including:
- block-level layouts (start)
- grid layouts stretch
- flexbox (ignored)
- table cells (ignored)
- absolutely-positioned layouts (start)
- absolutely-positioned boxes (stretch)
- replaced absolutely-positioned boxes (start)

.container {
  justify-items: stretch;
}

Baseline alignment values

This aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline of its alignment context.

.container {
  justify-items: <first | last> baseline;
}

The fallback alignment for first baseline is safe start.
The fallback alignment for last baseline is safe end.
baseline corresponds to first baseline when used alone

In the demo below (best viewed in Firefox), we see how elements align with the baseline of a grid based across the main axis.

Positional alignment values

start: Aligns items to the start edge of alignment container
end: Aligns items with the end edge alignment container
center: Aligns items in the center of alignment container
left: Aligns items in the left of alignment container
right: Aligns items in the right of alignment container
self-start: Aligns items in the start of each grid item cell
self-end: Aligns items in the end of each grid item cell

.container {
  justify-items: <start | left | self-start>
}

.container {
  justify-items: <end | right | self-end>
}

.container {
  justify-items: center;
}

Overflow alignment values

The overflow property determines how it will display the contents of the grid when the content exceeds the grid’s boundary limits. So when the contents are larger than the alignment container, it will result in overflow which might lead to data loss. To prevent this, we can use the safe value which tells browser to change alignment so that there is no data loss.

safe <left | right | center>: If an item overflows the alignment container, start mode is used.
unsafe <left | right | center>: Alignment value is kept as it is, irrespective on item size or alignment container.

Legacy values

legacy <right | left | center>: When used with a directional keyword (e.g. right, left or center), that keyword is passed to descendants to inherit. But if the descendant declares justify-self: auto; then legacy is ignored but still respects the directional keyword. The value computes to the inherited value if no directional keyword is provided. Otherwise, it it computes to normal.

Demo

More information

CSS Box Alignment Module Level 3 (Working draft)
A Complete Guide to Grid
A Complete Guide to Flexbox

Browser support

Browser support justify-items sort of runs the gamut since it is used in multiple layout contexts, like grid, flexbox, table cells. But in general, if grid and flexbox are supported, then you can assume that justify-items is as well.