ویژگی place-self CSS برای تراز کردن و قرار دادن یک آیتم grid در سلول grid آن به صورت افقی و عمودی استفاده می‌شود.

grid-item {
  place-self: [align-items] [justify-items];
}

مقادیر ممکن برای ویژگی align-item و justify-items عبارتند از:start end center stretch

مثال:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 400px;
}
.grid-item {
  background-color: #ccc;
  place-self: center;
}

ویژگی place-content CSS برای تراز و قرار دادن همه ایتم‌های grid در grid container هم به صورت افقی و هم به صورت عمودی استفاده می‌شود. هر دو ویژگی align-content و justify-content را همزمان تنظیم می‌کند.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  place-content: center;
}

ویژگی place-item CSS برای تراز و قرار دادن همه موارد Gridدر سلول‌های grid آنها به صورت افقی و عمودی استفاده می‌شود. هر دو ویژگی align-item و justify-item را به طور همزمان تنظیم می‌کند.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  place-items: center;
}

تفاوت ها:

place items و place content هر دو ویژگی align items و justify items و align content و justify content به طور همزمان تنظیم میکنند.

. place-self یک ویژگی است که تراز و موقعیت یک آیتم grid را در سلول grid آن تنظیم می‌کند.

در اینجا تفاوت بین این سه ویژگی وجود دارد:

place-item: این ویژگی تراز و موقعیت همه آیتم‌های grid را در سلول‌های grid آنها به صورت افقی و عمودی تنظیم می‌کند. برای کل grid container اعمال می‌شود و برای تنظیم تراز و موقعیت پیش فرض همه موارد شبکه استفاده می‌شود. این مختصر برای خصوصیات align-item و justify-item است.

place-content: این ویژگی تراز و موقعیت همه موارد grid را در grid container هم به صورت افقی و هم به صورت عمودی تنظیم می‌کند. برای کل grid container اعمال می‌شود و برای تراز و قرار دادن مسیرهای grid در grid container استفاده می‌شود. این مختصر برای خصوصیات align-content و justify-content است.

place-self: این ویژگی تراز و موقعیت یک آیتم grid را در سلول grid آن تنظیم می‌کند. برای یک آیتم grid منفرد اعمال می‌شود و برای نادیده گرفتن تراز و موقعیت پیش فرض تعیین شده توسط آیتم‌های مکان برای آن آیتم خاص استفاده می‌شود. این مختصر برای خصوصیات align-self و justify-self است.

به طور خلاصه، place items و مplace content به ترتیب برای تنظیم تراز و موقعیت پیش‌فرض همه آیتم‌های شبکه و ظرف شبکه استفاده می‌شوند، در حالی که place self برای نادیده گرفتن تراز و موقعیت پیش‌فرض یک آیتم شبکه استفاده می‌شود.