آموزش تراز کردن آیتم های گرید در CSS

آیتم های گرید را می توانیم در داخل سلولِ گریدِ مربوطه، با استفاده از ویژگی هایی مانند زیر، تراز کنیم:

• justify-self : یک ترازبندی افقی در داخل یک سلول را مشخص می کند. 
• align-self : یک ترازبندی عمودی را در داخل یک سلول مشخص می کند.
• place-self : یک ویژگی خلاصه شده، برای ویژگی های align-self و justify-self را مشخص می کند.

همچنین با استفاده از ویژگی های justify-items و align-items در ظرف گرید، می توانیم این موضوع را برای تمام آیتم های گرید اعمال کنیم. 

ویژگی justify-self در CSS

از ویژگی justify-self برای تراز کردن یک آیتم گرید در درون سلول گرید آن، در جهت درون خطی(inline direction) استفاده می شود. 

نکته: برای صفحات انگلیسی، جهت درون خطی(inline direction)، از چپ به راست است و جهت بلوکی(block direction) از بالا به پایین است. 

این ویژگی، می تواند یکی از مقادیر زیر را مورد استفاده قرار دهد:

• auto (پیش فرض)
• normal
• stretch
• start
• left
• center
• end
• right

نکته: برای اینکه این ویژگی، در ترازبندی تاثیر داشته باشد، آیتم گرید مورد نظر نیاز به فضای کافی به دور خود در جهت درون خطی(inline direction) دارد. 

.item1 {justify-self: right;}
.item6 {justify-self: center;}

ویژگی align-self در CSS

از ویژگی align-self برای ترابندی کردن آیتم گرید، در درون سلول گرید آن، در جهت بلوکی(block direction) استفاده می شود. 

این ویژگی می تواند یکی از مقادیر زیر را داشته باشد:

• auto (پیش فرض)
• normal
• stretch
• start
• end
• center

نکته: برای اینکه این ویژگی در ترازبندی تاثیر داشته باشد، نیاز است که آیتم گرید به دور خود در جهت بلوکی(block direction) فضای کافی در دسترس داشته باشد. 

.item1 {align-self: start;}
.item6 {align-self: center;}

ویژگی های ترازبندی آیتم های گرید در CSS

منبع: https://www.w3schools.com/css