Codectionary / Developer documentation / CSS

Grid Alignment: place-items, place-content

Grid alignment properties control how content is positioned within grid cells and how the grid itself is positioned within its container. justify-items/align-items control individual item alignment along each axis, and their shorthand place-items sets both at once. justify-content/align-content position the whole grid when it is smaller than its container, with place-content as their shorthand.

Syntax

place-items: align justify;
place-content: align justify;

Examples

Centering with place-items

The famous one-line perfect-centering trick using Grid.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.center {
  display: grid;
  place-items: center; /* centers child both vertically and horizontally */
  height: 300px;
}
  1. The container has extra space, making alignment visible.
  2. place-items aligns the child inside its grid area.
  3. Change the alignment keyword and rerun to compare item alignment with track-group alignment.
HTML used by this example
<div class="center preview-frame"><strong class="preview-tile">Centred label</strong></div>

Positioning the Grid Itself

When the grid is smaller than its container, place-content controls its position.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  place-content: center; /* centers the whole grid within a larger container */
  height: 400px;
}
  1. The container has extra space, making alignment visible.
  2. place-content positions the grid tracks as a group inside the larger container.
  3. Change the alignment keyword and rerun to compare item alignment with track-group alignment.
HTML used by this example
<div class="container preview-frame"><div class="preview-tile">One</div><div class="preview-tile">Two</div><div class="preview-tile">Three</div></div>

Parameters and values

  • justify-items (start | center | end | stretch): Aligns items horizontally within their cells
  • align-items (start | center | end | stretch): Aligns items vertically within their cells
  • place-items (shorthand): Sets align-items and justify-items together
  • place-content (shorthand): Positions the entire grid within its container

Best practices

  • Use place-items: center as the simplest, most reliable way to perfectly center a single child element
  • Remember justify-items/align-items affect items within their cells, while justify-content/align-content position the grid tracks as a whole within the container
  • These same alignment properties work in Flexbox too, though the axis they refer to depends on flex-direction there
  • Use align-self/justify-self on an individual grid item to override the container's place-items just for that one item

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading