1. css
  2. /properties
  3. /justify-items

justify-items

Definition

The justify-items property is used to align grid items along the horizontal axis within a grid container. It specifies the default justify-self value for all items within the grid container, unless they are overridden by the justify-self property on individual items. This property applies only to grid containers.

Examples

Setting justify-items to start:

.grid-container {
  display: grid;
  justify-items: start;
}

Setting justify-items to center:

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

Setting justify-items to end:

.grid-container {
  display: grid;
  justify-items: end;
}

Values

ValueDescription
stretchDefault value. Grid items are stretched to fill the grid area.
centerGrid items are centered within the grid area.
startGrid items are aligned with the start of the grid area.
endGrid items are aligned with the end of the grid area.
baselineGrid items are aligned with the text baseline within the grid area.
first baselineGrid items are aligned with the first text baseline within the grid area.
last baselineGrid items are aligned with the last text baseline within the grid area.

Best Practices

  • Use justify-items to set the default horizontal alignment of all grid items within a grid container.
  • Use justify-self to override the default alignment of individual grid items within a grid container.
  • Avoid using justify-items on non-grid containers as it has no effect.
  • Use auto for justify-items if you want grid items to be sized based on their content.
  • Always test your layout on different screen sizes and devices to ensure that it looks good and is aligned as expected.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes