Grid Alignment

Grid has alignment properties for both the grid container and individual items.

Container Properties

Property	Controls
`justify-items`	Items along row axis (horizontal)
`align-items`	Items along column axis (vertical)
`justify-content`	Grid tracks inside container (horizontal)
`align-content`	Grid tracks inside container (vertical)

Item Properties

Property	Controls
`justify-self`	Single item horizontal alignment
`align-self`	Single item vertical alignment
`place-self`	Shorthand for both

Example

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;  /* center items in their cells */
  align-items: center;
  height: 400px;
}

/* One item aligned differently */
.special {
  justify-self: end;
  align-self: start;
}

/* Shorthand */
.centered-item {
  place-self: center;
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned