CSS - place-items Property

CSS place-items is a shorthand property used in CSS Grid Layout to set both the align-items and justify-items properties in a single declaration. It allows you to align and justify grid items within the grid container along both the block (column) and inline (row) axes simultaneously

This property is a shorthand for the following CSS properties:

• align-items

align-items

• justify-items

justify-items

Possible Values

• A single align-items value aligns in both the block and inline directions.

A single align-items value aligns in both the block and inline directions.

• An align-items value sets the block direction alignment, followed by justify-items , which specifies inline alignment.

An align-items value sets the block direction alignment, followed by justify-items , which specifies inline alignment.

Applies To

All elements.

Syntax

Keyword Values

place-items: center;
place-items: normal start;

Positional Alignment

place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;

Baseline Alignment

place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

CSS place-items - Placing Items in a Grid Container

The following example demonstrates the different behavior of the place-items property in the grid layout −

CSS place-items - Placing Items in a Flex Container

The following example demonstrates the different behavior of the place-items property in the flex layout −