عناصر Grid در CSS

چگونه عناصر را در CSS Grid تراز کنم؟

CSS Grid یک سیستم چیدمان قدرتمند است که به توسعه‌دهندگان اجازه می‌دهد عناصر صفحه را به راحتی در دو بعد (ردیف و ستون) تراز و سازماندهی کنند. تراز کردن عناصر در CSS Grid یکی از اساسی‌ترین مهارت‌ها برای طراحی رابط‌های کاربری منسجم و واکنش‌گرا است.

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

کاربردهای عملی تراز عناصر در CSS Grid

تراز کردن عناصر در CSS Grid در موارد زیر کاربرد دارد:

ایجاد طرح‌بندی‌های متقارن و منظم
تراز محتوای داخل سلول‌های گرید
تنظیم فاصله‌های بین عناصر
طراحی رابط‌های کاربری واکنش‌گرا
کنترل موقعیت عناصر در صفحه

نمونه کدهای مرتبط

در ادامه سه مثال کاربردی برای تراز کردن عناصر در CSS Grid ارائه شده است:

مثال ۱: تراز افقی و عمودی درون سلول‌ها

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  justify-items: center; /* تراز افقی */
  align-items: center; /* تراز عمودی */
}

مثال ۲: تراز کل گرید در محفظه

.container {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  height: 500px;
  justify-content: space-around; /* تراز افقی کل گرید */
  align-content: center; /* تراز عمودی کل گرید */
}

مثال ۳: تراز فردی عناصر

.item {
  justify-self: end; /* تراز افقی برای عنصر خاص */
  align-self: start; /* تراز عمودی برای عنصر خاص */
}

نکات کلیدی در تراز عناصر CSS Grid

justify-items و align-items برای تراز محتوای داخل تمام سلول‌های گرید استفاده می‌شوند
justify-content و align-content زمانی کاربرد دارند که فضای اضافی در محفظه گرید وجود داشته باشد
justify-self و align-self برای تراز فردی عناصر داخل سلول‌ها استفاده می‌شوند
مقادیر رایج برای تراز شامل start، end، center، stretch و space-between است
برای مرورگرهای قدیمی ممکن است نیاز به پیشوندهای vendor داشته باشید

با ترکیب این ویژگی‌ها می‌توانید به دقت کنترل کنید که عناصر مختلف در گرید چگونه تراز شوند و طرح‌بندی کاملاً حرفه‌ای ایجاد کنید. تمرین با مقادیر مختلف این ویژگی‌ها به درک بهتر عملکرد آنها کمک می‌کند

خلاصه درس

تمرین

مشاهده پاسخ

توسعه دهندگان

امیر عبدی زاده