justify-items#

#Introduction

The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. It aligns the items inside their grid areas on the inline axis.

#Examples

css-apisrc/justify-items/App.tsx

Code

Preview

#Syntax

justify-items: stretch;
justify-items: center;
justify-items: start;
justify-items: end;

#Values

#stretch

Default value. If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.

#center

The items are packed flush to each other toward the center of the alignment container.

#start

The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

#end

The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

#Formal definition

#Formal syntax

justify-items = stretch | center | start | end

#Difference with the web

mdn: justify-items

1. normal is not supported. Initial value is stretch.
2. self-start, self-end, left, right, flex-start, flex-end are not supported.

#Compatibility