CSS justify-items: Grid vs Flexbox Explained

The justify-items property is a CSS Box Alignment module feature designed to control the alignment of child elements along the inline (horizontal) axis within their allocated layout slots. While justify-items is fully functional and widely used in CSS Grid to align items inside their individual grid cells, it has no effect when applied to a Flexbox container. This guide explains how justify-items operates inside CSS Grid, why it does not work in Flexbox, and which alternatives you should use instead.

How justify-items Works in CSS Grid

In CSS Grid, the layout is two-dimensional, dividing space into explicit columns and rows that create distinct grid cells. The justify-items property is declared on the grid container and sets the default horizontal alignment (justify-self) for all direct grid children inside their designated grid areas along the inline (row) axis.

By default, grid items have a justify-items value of stretch, meaning the elements expand to fill the entire width of their grid cell (provided no fixed width is set).

Common Values in CSS Grid

  • stretch (default): Stretches items to fill the entire width of their grid area.
  • start: Aligns items to the inline-start edge of their grid cell.
  • end: Aligns items to the inline-end edge of their grid cell.
  • center: Centers items horizontally within their grid cell.

Individual grid items can override the container's justify-items value at any time using the justify-self property.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center; /* Centers each child within its respective grid cell */
}

Why justify-items Does Not Work in Flexbox

In Flexbox, the justify-items property is completely ignored by web browsers.

Flexbox is a one-dimensional layout system focused on distributing space along a single line (the main axis) or across lines (the cross axis). Unlike CSS Grid, Flexbox does not generate rigid, predefined "cells" for its items. Because there are no discrete cells along the main axis, an item cannot be justified "within its slot"—the items simply sit next to each other along the axis.

Consequently, justify-self also does not work on individual flex items along the main axis.

How to Achieve Equivalent Alignment in Flexbox

To position items in Flexbox where you might intuitively reach for justify-items, use the following properties instead:

1. For Main-Axis Distribution: justify-content

To control the alignment and spacing of all flex items collectively along the main axis (horizontal by default), apply justify-content to the flex container:

.flex-container {
  display: flex;
  justify-content: center; /* flex-start, flex-end, space-between, space-around */
}

2. For Cross-Axis Alignment: align-items and align-self

If you intended to align items along the cross axis (vertical by default), use align-items on the container or align-self on specific flex children:

.flex-container {
  display: flex;
  align-items: center; /* Aligns all children vertically */
}

.flex-item {
  align-self: flex-end; /* Overrides container alignment for this item */
}

3. For Individual Main-Axis Positioning: Auto Margins

If you need to push a single flex item to the start or end along the main axis, standard alignment properties will not work, but auto margins will:

.flex-item-right {
  margin-left: auto; /* Absorbs remaining space and pushes item to the far right */
}

Summary of Differences

  • CSS Grid: justify-items works natively. It aligns children along the inline axis within their individual grid cells.
  • Flexbox: justify-items has no effect. Use justify-content for group distribution along the main axis, or margin: auto for individual item positioning.