How to Center One Specific Grid Item in CSS Grid (While Others Stay Normal)

In CSS Grid, every item is placed inside a grid cell. To center only one item, you use alignment properties on that item only, without affecting the rest of the grid.

You can do this using:

✔ justify-self (horizontal centering)

✔ align-self (vertical centering)

✔ or place-self (both at once)

✅ Code Example (Recommended Method — place-self)

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    background: #f4f4f4;
  }

  .grid-item {
    background: #ddd;
    padding: 20px;
    border-radius: 8px;
  }

  /* Center ONLY item 3 */
  .grid-item.centered {
    place-self: center; /* aligns both horizontally & vertically */
  }
</style>

<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item centered">Item 3 (Centered)</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

✔ Result:

• Only Item 3 is centered.
• Other items remain aligned normally according to the grid layout.

✅ Alternative Methods

1️⃣ Using justify-self and align-self separately

.grid-item.centered {
  justify-self: center; /* horizontal */
  align-self: center;   /* vertical */
}

Use this if you only want one direction:

.grid-item.centered {
  justify-self: center;  /* only horizontal */
}

or

.grid-item.centered {
  align-self: center;    /* only vertical */
}

2️⃣ Centering using margins (horizontal only)

.grid-item.centered {
  margin-left: auto;
  margin-right: auto;
}

✔ Works when:

• You want horizontal centering only
• The element has a defined width or content width

❌ Does NOT center vertically.

3️⃣ Using Flexbox inside the grid item (not recommended unless needed)

.grid-item.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

✔ Good if:

• You want to center content inside the grid item
• Not the grid item itself

📝 Deep Explanation for Articles, SEO & Learning

Centering in CSS Grid is different from Flexbox because grid items align themselves within grid cells, not relative to other items. This gives powerful control over individual item alignment, without changing the layout of other elements.

🔍 Why This Works

CSS Grid provides per-item alignment properties:

🔹 justify-self

Aligns the item horizontally inside its column

• start
• center
• end
• stretch (default)

🔹 align-self

Aligns the item vertically inside its row

• start
• center
• end
• stretch (default)

🔹 place-self

Shorthand for:

place-self: align-self justify-self;

So:

place-self: center;

Means:

align-self: center;
justify-self: center;

🔧 Why This Won’t Affect Other Grid Items

CSS Grid alignment properties are item-specific, not container-wide.
This means you can center one item without changing anything else.

Example:

.item.centered {
  place-self: center;
}

Only this single item uses custom alignment — all others remain in the default stretch alignment.

📌 Practical Situations Where You Need This

✔ Centering a featured item (e.g., "Sale" box)
✔ Positioning a special card different from others
✔ Highlighting a CTA button inside a grid
✔ Aligning icons or media elements without restructuring layout
✔ Making a single grid item stand out aesthetically

🌟 Best Practice Recommendation

For clarity and maintainability:

• Use place-self: center to center both directions.
• Use justify-self or align-self when you only want one direction.
• Avoid using Flexbox unless you need to center content inside the item, not the item itself.