Alignment inside Grid

Alignment in a grid occurs on two levels:

  • Container-level alignment → How each grid item is positioned within its grid cell. (For example, whether each small box is in the middle, at the top, or to the left of its box.)
  • Content-level alignment → How the entire grid structure (rows and columns) is aligned within the container. (For example, whether the entire grid is in the center, or to the left.)

Container-Level Alignment

Here we’re talking about items within the grid. This controls how each grid item is positioned within its box (cell).

Container level Alignments are:

  1. justify-items
  2. align-items
  3. place-items

justify-items

This property aligns items horizontally (left–right)— that is, the items are horizontally centered within the cell.

Values:

  • start → Left side
  • end → Right side
  • center → Center horizontally
  • Stretch (default) → Stretches to the width of the cell

Example:

.grid-container {
  display: grid;
  justify-items: center;
}

Meaning: Every grid item will appear horizontally centered within its cell.

align-items

This property aligns items in the vertical (top–bottom) direction — i.e. moving the cell vertically the item appears.

Values:

  • start → Top me
  • end → Bottom me
  • center → Center vertically
  • stretch (default) → Stretches to the height of the cell

Example:

.grid-container {
  display: grid;
  align-items: center;
}

Meaning: Each grid item will be vertically centered within its cell.

place-items (Shorthand)

This is a shortcut property which is used to write both justify-items and align-items in one line.

Syntax:

place-items: align-items justify-items;

If you write the one value, the same value applies to both.

Example 1:

place-items: center;

Meaning: It will do two things → align-items: center; & justify-items: center;

That is, the items in each cell will be in the perfect center (top-bottom and left-right in both directions).

Example 2:

place-items: start end;

Meaning: Vertically top me (align-items: start) & Horizontally right me (justify-items: end)

Content-Level Alignment

Now we’re talking about the alignment of the entire grid structure—

that is, how the entire grid is positioned within the container (center, top, bottom, etc.).

Content Level Alignments are:

  1. Justify-content
  2. align-content
  3. place-content

justify-content

It aligns all grid tracks (columns) horizontally (from left to right), determining whether the entire grid content is positioned at the start, center, or end of the container.

Possible Values:

  • Start → Stick to Grid left.
  • end → Stick to Grid right.
  • center → Grid is horizontally in the center.
  • space-between → equal space between columns.
  • space-around → equal space around the columns.
  • space-evenly → Everywhere equal spacing (start, middle, end).

Example:

.grid-container {
   display: grid;
   justify-content: center;
}

Meaning: The entire grid will appear horizontally in the center of the container.

align-content

It aligns the entire grid tracks (rows) in the vertical (top–bottom) direction. That is, how should the grid container be placed above, in the bottom, or in the center.

Possible Values:

  • Start → Stick to Grid top.
  • end → Grid will be stuck at the bottom.
  • center → Grid is vertically in the center.
  • space-between → equal space between rows.
  • space-around → equal space around the rows.
  • space-evenly → Every side equal space.

Example:

.grid-container {
   display: grid;
   align-content: center;
}

Meaning: The entire grid will appear vertically in the center of the container.

place-content (Shorthand)

This is a shorthand that combines align-content and justify-content.

Syntax:

place-content: align-content justify-content;

If one value is given, the same value is applied in both directions.

Example 1:

place-content: center;

Meaning: It will apply two things → align-content: center; & justify-content: center;

The entire grid will move to the center horizontally and vertically.

Example 2:

place-content: start space-between;

Meaning: Vertically top (align-content: start) & Horizontally equal space between columns (justify-content: space-between)

Remember:

  • justify-items / align-items = position each box inside its cell
  • justify-content / align-content = position the whole grid inside the container

Once you clearly separate these two, grid alignment stops being confusing and starts being powerful.

Example:

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
  gap: 10px;
  width: 350px;
  height: 350px;
  border: 3px solid #000;
  place-content: center; /* Align entire grid inside container */
  place-items: center; /* Align each item inside its cell */
}
.box {
  background: #4c8bf5;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
</style>
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

📣 Follow us for more updates:

Follow on LinkedIn Join WhatsApp Channel
Scroll to Top