CSS Grid Advanced Features

Aligning Grid Items with align-items, justify-items, align-self, and justify-self

CSS Grid provides great control over how grid items are aligned both horizontally and vertically.

align-items: Aligns items vertically within their grid cells (cross-axis).
justify-items: Aligns items horizontally within their grid cells (main axis).
align-self: Allows you to align individual grid items vertically.
justify-self: Allows you to align individual grid items horizontally.

Example:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* Aligns items vertically to the center */
  justify-items: center; /* Aligns items horizontally to the center */
}

You can override these values for individual items using align-self or justify-self:

.grid-item {
  align-self: end; /* Aligns this specific item to the bottom */
  justify-self: start; /* Aligns this specific item to the left */
}