description & Usage
The justify-items property is set on the grid container to align the child tag (grid items) to the inner direction.
For pages with English language, the internal direction is from left to right and the block direction is downwards.
Note: Use the align-item property to align grid items in block direction instead of inline.
Informations
| # | Description |
|---|---|
| Default Value | legacy |
| Inherited | no |
| Animatable | no |
| Version | CSS3 |
| JavaScript syntax | object.style.justifyItems="center" |
Browser compatibility and Support
The numbers inserted in the browser fields indicate the version that supports the align-self property.
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| justify-items |
Syntax
Values
| Values | Description |
|---|---|
| legacy | Applies the default value to the property. |
| normal | Quantification is dependent on the context of the arrangement of items. |
| stretch | If the internal size of the container (its width) is not set, the items will be displayed stretched to fill the grid cell. |
| start | Levels items linearly in the starting direction. |
| left | Aligns items to the left. |
| center | Aligns items in the center. |
| end | Levels items linearly in the final direction. |
| right | |
| overflow-alignment | |
| baseline alignment | The corresponding property is leveled with the baseline. |
| initial | Adds this value to its default property. |
| inherit | It inherits this value from its parent tag. |
Related Pages
CSS training: CSS grid
CSS tutorial: CSS positioning
CSS reference: align-items property
CSS reference: direction attribute
CSS Reference: The grid property
CSS reference: grid-template-columns property
CSS Reference: Justify your property
CSS Reference: The position attribute
CSS Reference: Write mode property
