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

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