Grid alignment: items

To make the most of the grid, you have to know how to place things in it correctly. Let's take a look at the primary properties that can aid us, explore their attributes, and discover how we can use them effectively.

Justify-items

As we already know there are two axes in a grid: the main axis and the cross-axis. The justify-items property helps us to justify elements inside a grid container by inline (main) axis. It applies to all elements.

It has the following values:

• start. It aligns elements by starting(left) line.

.item {
  min-width: 100px;
  background: #cc8538;
}

.container {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  grid-template-rows: repeat(3, 100px);
  gap: 15px;
  width: 500px;

  justify-items: start;
}

• end. It aligns elements by the ending(right) line.

.container {
  justify-items: end;
}

• center. It sets elements at the center of a grid element.

.container {
  justify-items: center;
}

• stretch. It stretches each element to the full width of the grid cell. This value is set by default.

.container {
  justify-items: stretch;
}

Align-items

With the align-items property we can align grid elements by block(cross) axis. It also applies to all elements.

It has the following values:

• start. Aligns the element by the start(top) line.

.item {
  min-height: 50px;
  background: #cc8538;

}

.container {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  grid-template-rows: repeat(3, 100px);
  gap: 15px;
  width: 500px;


  align-items: start;
}

• end. It aligns elements by the ending(bottom) line.

.container {
  align-items: end;
}

• center. It sets elements at the center of a grid element.

.container {
  align-items: center;
}

• stretch. It stretches an element to the height of the grid cell. It's set by default.

.container {
  align-items: stretch;
}

Place-items

The place-items shorthand sets up align-items and justify-items properties in a single declaration. It should be in the following order:

Place-items: <align-items> <justify-items>

.item {
  min-width: 100px;
  min-height: 100px;
  background: #cc8538;
}

.container {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  grid-template-rows: repeat(3, 150px);
  gap: 15px;
  width: 500px;

  place-items: start end;
}

Conclusion

Understanding how to properly align elements within a grid is essential to uncovering its full potential. The justify-items property aligns elements along the main axis, while align-items aligns elements along the cross-axis. The place-items property serves as a shorthand for setting both justify-items and align-items in a single declaration. So, let's put what you've learned to the test!