Alignment

CSS Grid has a rich set of alignment properties. justify-* controls the horizontal (inline/column) axis, align-* controls the vertical (block/row) axis. -items/-content affect all items; -self affects individual items. sdfsdfs

justify-itemsalign-itemsjustify-contentalign-contentjustify-selfalign-selfplace-itemsplace-contentplace-self

1. justify-items — Horizontal Alignment of All Items

Controls how grid items align within their cell horizontally. Values: start, end, center, stretch (default). Items are smaller than their cell.

CSS

.container {
  justify-items: start;   /* left edge of cell */
  justify-items: center;  /* centered          */
  justify-items: end;     /* right edge        */
  justify-items: stretch; /* fill cell (default)*/
}
start
1
2
3
center
1
2
3
end
1
2
3
stretch
1
2
3

2. align-items — Vertical Alignment of All Items

Controls how items align within their cell vertically. Same values as justify-items. Requires the row to have a defined height larger than the item.

CSS

.container {
  grid-auto-rows: 80px; /* rows taller than items */
  align-items: start;   /* top of cell    */
  align-items: center;  /* middle of cell  */
  align-items: end;     /* bottom of cell  */
  align-items: stretch; /* fill cell (default) */
}
start
1
2
center
1
2
end
1
2
stretch
1
2

3. justify-content — Horizontal Alignment of the Grid

When the grid tracks are smaller than the container, justify-content controls how the entire grid aligns horizontally within the container.

CSS

.container {
  /* fixed columns leave extra space in container */
  grid-template-columns: 80px 80px 80px;
  justify-content: start;         /* left  */
  justify-content: center;        /* center*/
  justify-content: end;           /* right */
  justify-content: space-between; /* spread*/
  justify-content: space-around;  /* equal surrounding space */
  justify-content: space-evenly;  /* even gaps including edges */
}
start
1
2
3
center
1
2
3
end
1
2
3
space-between
1
2
3
space-around
1
2
3
space-evenly
1
2
3
justify-content moves the entire grid, not individual items. It only has an effect when track sizes sum to less than the container width.

4. align-content — Vertical Alignment of the Grid

Same as justify-content but for the vertical axis. Controls how rows are distributed within the container when they don't fill all the height.

CSS

.container {
  height: 300px; /* taller than track sum */
  grid-template-rows: 60px 60px;
  align-content: start;         /* top    */
  align-content: center;        /* middle */
  align-content: end;           /* bottom */
  align-content: space-between; /* spread */
}
start
1
2
3
4
center
1
2
3
4
end
1
2
3
4
space-between
1
2
3
4

5. justify-self & align-self — Per-Item Alignment

Override the container's alignment for a specific item. These properties go on the grid item, not the container.

CSS

/* On individual items (overrides container settings) */
.item-a {
  justify-self: start;
  align-self: start;
}
.item-b {
  justify-self: center;
  align-self: center;
}
.item-c {
  justify-self: end;
  align-self: end;
}
justify-self: start
align-self: start
center / center
end / end
stretch (default)
center / start
start / end

6. place-* Shorthands

The place-* shorthands combine align and justify in one property: "place-items: align-value justify-value". If one value is given, it applies to both.

CSS

/* Shorthands: align justify */
.container {
  place-items: center;         /* both centered */
  place-items: start end;     /* align=start, justify=end */
  place-content: center;       /* grid centered in container */
  place-content: start space-between;
}
.item {
  place-self: end center;     /* align=end, justify=center */
}
1
2
3
4
5
6
place-items: center is the easiest way to center items both horizontally and vertically in their grid cells.