justify-items

Avatar of Mohit Khare
Mohit Khare on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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

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.

Grid layout

IEEdgeFirefoxChromeSafariOpera
No16+45+57+10.1+44+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
81+45+81+10.1+59+
Source: caniuse

Flex layout

IEEdgeFirefoxChromeSafariOpera
No12+20+52+9+12.1+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
87+83+81+9+12.1+
Source: caniuse