تراز بندی در CSS Grid Layout

مقدمه‌ای بر ویژگی‌های تراز بندی در Grid Layout

تراز بندی (alignment) یکی از اصلی ترین قابلیت‌های طراحی وب است که توانایی تغییر ظاهر و احساس یک صفحه وب را به ما می‌دهد. در Grid Layout که یکی از جذاب‌ترین ویژگی‌های CSS برای طراحی صفحات است، ما می‌توانیم به راحتی آیتم‌ها را درون یک شبکه (grid) بچینیم و تراز بندی کنیم. این امر امکانات فراوانی برای طراحان وب می‌دهد تا بتوانند چیدمان‌های متنوع و مدرنی خلق کنند. در این بخش قصد داریم نگاهی دقیق‌تر به قابلیت‌های تراز بندی در Grid Layout بپردازیم.

برای درک بهتر از تنظیمات تراز بندی در CSS Grid، مفاهیم کلیدی مانند align-items و justify-items را مورد بررسی قرار خواهیم داد. این خصوصیات به ما اجازه می‌دهند تنظیمات تراز بندی را در سطح محور اصلی و ثانویه شبکه انجام دهیم. به عنوان مثال، می‌توانید با استفاده از این ویژگی‌ها آیتم‌های خود را در مرکز یا گوشه‌های یک شبکه قرار دهید.

Align-items و نقش آن در Grid Layout

ویژگی align-items به ما اجازه می‌دهد که نحوه چیدمان آیتم‌ها در طول محور عمودی (cross axis) را تعیین کنیم. این ویژگی می‌تواند مقادیری مانند 'start', 'end', 'center' یا 'stretch' را بپذیرد که هر کدام نمایانگر چیدمان مخصوصی هستند.

توجه داشته باشید که از این ویژگی‌ها می‌توان برای شخصی‌سازی دقیق طراحی‌های وب استفاده کرد. مثلا، با استفاده از گزینه 'center' می‌توانید آیتم‌های خود را در مرکز محور عمودی قرار دهید و به طراحی تقارن ایجاد کنید.

Justify-items: تنظیم تراز بندی آیتم‌ها در محور اصلی

خصوصیت justify-items مشابه align-items است اما برای محور افقی (main axis) کاربرد دارد. در طراحی‌های مختلف، ممکن است نیاز داشته باشید که آیتم‌ها را در طول محورهای مختلف به صورت راست‌چین، چپ‌چین یا وسط‌چین مرتب کنید. اینجا است که این خصوصیت به کار می‌آید.

این قابلیت‌های تراز بندی باعث می‌شود تا انعطاف‌پذیری بیشتری در طراحی صفحات مدرن داشته باشید و به راحتی بتوانید طراحی‌های خلاقانه و کاربرپسند خلق کنید.

.grid-container {  
  display: grid;  
  grid-template-columns: repeat(3, 1fr);  
  align-items: center;  
  justify-items: center;  
}  
.grid-item {  
  background-color: lightgray;  
  padding: 20px;  
  border: 1px solid #ccc;  
}

توضیح کد:

.grid-container: این کلاس برای ظرف اصلی گرید تنظیم می‌شود که حاوی تنظیمات کلی گرید است.
display: grid;: این خط مشخص می‌کند که ظرف به صورت گرید نمایش داده شود.
grid-template-columns: repeat(3, 1fr);: با استفاده از این ویژگی سه ستون مساوی ایجاد می‌شود.
align-items: center;: تمامی آیتم‌ها در محور عمودی مرکز قرار می‌گیرند.
justify-items: center;: تمامی آیتم‌ها در محور افقی مرکز چیده می‌شوند.
.grid-item: کلاس مربوط به آیتم‌های تک برای اعمال استایل است.
background-color: lightgray;: رنگ پس‌زمینه آیتم‌ها به خاکستری تبدیل شده است.
padding: 20px;: فضای داخلی (padding) برابر 20 پیکسل است.
border: 1px solid #ccc;: حاشیه آیتم‌ها به رنگ طوسی و به صورت یک پیکسل تنظیم شده است.