CSS place-items

place-items is a CSS property that allows you to align items both horizontally and vertically within a container. It is a shorthand property for both align-items and justify-items.

The syntax for using place-items is as follows:


.container {
  display: grid;
  place-items: align-items value justify-items value;
}

Here, the align-items value specifies how items are aligned vertically and the justify-items value specifies how items are aligned horizontally.

Let's take a look at some examples:

Result:
1
2
3

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
  place-items: center center;
}

.item {
  background-color: #f2f2f2;
  text-align: center;
  padding: 10px;
}

In this example, the items are aligned both vertically and horizontally to the center of the container.

Result:
1
2
3

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
  place-items: start end;
}

.item {
  background-color: #f2f2f2;
  text-align: center;
  padding: 10px;
}

In this example, the items are aligned to the start vertically and the end horizontally within the container.

Experiment with different values for place-items to see how you can align items within a grid container in various ways.