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.
/* Basic keywords */
justify-items: auto;
justify-items: normal;
justify-items: stretch;
/* Positional alignment */
justify-items: center; /* Pack items around the center */
justify-items: start; /* Pack items from the start */
justify-items: end; /* Pack items from the end */
justify-items: flex-start; /* Equivalent to 'start'. Note that justify-items is ignored in Flexbox layouts. */
justify-items: flex-end; /* Equivalent to 'end'. Note that justify-items is ignored in Flexbox layouts. */
justify-items: self-start;
justify-items: self-end;
justify-items: left; /* Pack items from the left */
justify-items: right; /* Pack items from the right */
/* Baseline alignment */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;
/* Overflow alignment (for positional alignment only) */
justify-items: safe center;
justify-items: unsafe center;
/* Legacy alignment */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;
/* Global values */
justify-items: inherit;
justify-items: initial;
justify-items: unset;Source: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
/* Basic keywords */
align-items: normal;
align-items: stretch;
/* Positional alignment */
/* align-items does not take left and right values */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;
/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;Source: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
Important: these properties apply only to the grid container.