How to use place-self in grid in css

CssHow-ToBeginner · 3 min read

How to Use place-self in CSS Grid: Quick Guide

Use the place-self property in CSS Grid to set both align-self and justify-self in one line. It controls how a grid item is positioned inside its grid cell vertically and horizontally.

📐

Syntax

The place-self property combines two alignment properties: align-self (vertical alignment) and justify-self (horizontal alignment). You can set one or both values.

place-self: <align-self> <justify-self>;
If only one value is given, it applies to both directions.

css

place-self: start end;
place-self: end;
place-self: center stretch;

💻

Example

This example shows a grid container with three items. The second item uses place-self to center itself vertically and align to the end horizontally inside its grid cell.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px;
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}
.grid-item {
  background-color: #4a90e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 5px;
}
.item2 {
  place-self: center end;
  background-color: #e94e77;
}

Output

⚠️

Common Pitfalls

One common mistake is using place-self on elements that are not grid items; it only works inside a grid container. Another is forgetting that if you provide only one value, it applies to both vertical and horizontal alignment, which might not be what you want.

Also, place-self overrides individual align-self and justify-self settings on the same element.

css

/* Wrong: place-self on non-grid item */
.non-grid {
  place-self: center;
}

/* Right: place-self on grid item */
.grid-item {
  place-self: center;
}

📊

Quick Reference

Property	Description	Example Values
place-self	Sets vertical and horizontal alignment of a grid item	start, center, end, stretch
align-self	Vertical alignment inside grid cell	start, center, end, stretch
justify-self	Horizontal alignment inside grid cell	start, center, end, stretch

✅

Key Takeaways

Use place-self to set both vertical and horizontal alignment of a grid item in one line.

place-self only works on grid items inside a CSS Grid container.

If you provide one value to place-self, it applies to both align-self and justify-self.

Using place-self overrides individual align-self and justify-self properties.

Common values are start, center, end, and stretch.