CSS Grid Layout (یا به اختصار Grid) یک سیستم چیدمان دو بعدی قدرتمند در CSS است که به طراحان وب اجازه می‌دهد تا طرح‌بندی‌های پیچیده و ساختاریافته‌ای را با کنترل دقیق بر روی ردیف‌ها و ستون‌ها ایجاد کنند. برخلاف Flexbox که برای چیدمان در یک بُعد (ردیف یا ستون) طراحی شده، Grid برای مدیریت همزمان هر دو بُعد ایده‌آل است.

۱. مفاهیم پایه‌ای Grid

  • Grid Container (کانتینر گرید): عنصری که با display: grid; یا display: inline-grid; به یک کانتینر گرید تبدیل می‌شود. این کانتینر، آیتم‌های درون خود را مدیریت می‌کند.
  • Grid Items (آیتم‌های گرید): عناصر فرزند مستقیم کانتینر گرید.
  • Grid Lines (خطوط گرید): خطوط افقی و عمودی که سطح گرید را تشکیل می‌دهند. این خطوط از 1 شروع شده و شماره‌گذاری می‌شوند.
  • Grid Tracks (مسیرهای گرید): فضای بین دو خط گرید موازی (یعنی یک ردیف یا یک ستون).
  • Grid Cells (سلول گرید): کوچکترین واحد قابل آدرس‌دهی در گرید، که حاصل تقاطع یک خط ردیف و یک خط ستون است.
  • Grid Areas (نواحی گرید): نواحی مستطیلی که از یک یا چند سلول گرید تشکیل شده‌اند و می‌توانند نام‌گذاری شوند تا چیدمان‌های پیچیده‌تری ایجاد کنند.

۲. تعریف ساختار گرید: ردیف‌ها و ستون‌ها

برای ایجاد ساختار گرید، از خصوصیات زیر بر روی کانتینر گرید استفاده می‌کنیم:

  • grid-template-columns: ابعاد و تعداد ستون‌ها را تعریف می‌کند.
  • مثال: grid-template-columns: 100px 1fr 2fr; (یک ستون 100 پیکسلی، یک ستون با عرض یک واحد کسری، و یک ستون با عرض دو واحد کسری).
  • واحد fr (fraction): برای تقسیم فضای موجود به صورت کسری استفاده می‌شود.
  • grid-template-rows: ابعاد و تعداد ردیف‌ها را تعریف می‌کند.
  • مثال: grid-template-rows: auto 150px; (یک ردیف با ارتفاع متناسب با محتوا، و یک ردیف با ارتفاع 150 پیکسل).
  • repeat(): برای تعریف الگوهای تکرارشونده ستون‌ها یا ردیف‌ها.
  • مثال: grid-template-columns: repeat(3, 1fr); (سه ستون با عرض مساوی).
  • auto-fit و auto-fill: واحدهای مفیدی در ترکیب با repeat() برای ایجاد گرید واکنش‌گرا که تعداد ستون‌های آن بر اساس عرض کانتینر تغییر می‌کند.

۳. فاصله بین آیتم‌ها: gap

خصوصیت gap (و یا row-gap و column-gap به صورت جداگانه) برای تعیین فاصله بین ردیف‌ها و ستون‌ها استفاده می‌شود:

  • gap: 10px;: هم فاصله بین ردیف‌ها و هم ستون‌ها 10 پیکسل خواهد بود.
  • row-gap: 15px; column-gap: 5px;: فاصله بین ردیف‌ها 15 پیکسل و بین ستون‌ها 5 پیکسل خواهد بود.

۴. قرار دادن آیتم‌ها در گرید

پس از تعریف ساختار گرید، می‌توانیم آیتم‌ها را درون سلول‌ها یا نواحی مشخص قرار دهیم:

  • تعیین موقعیت با خطوط گرید:
  • grid-column-start: خط شروع ستون برای آیتم.
  • grid-column-end: خط پایان ستون برای آیتم.
  • grid-row-start: خط شروع ردیف برای آیتم.
  • grid-row-end: خط پایان ردیف برای آیتم.
  • میانبر grid-column: grid-column-start / grid-column-end
  • میانبر grid-row: grid-row-start / grid-row-end
  • تعیین موقعیت با نام‌گذاری نواحی:
  • ابتدا با grid-template-areas در کانتینر، نواحی را نام‌گذاری می‌کنیم.
  • سپس در آیتم، با grid-area: نام_ناحیه; آن را در ناحیه مورد نظر قرار می‌دهیم.

۵. تراز کردن محتوا در گرید

  • درون سلول‌ها (آیتم‌ها):
  • justify-items: تراز افقی آیتم‌ها درون سلول گرید. (start, end, center, stretch).
  • align-items: تراز عمودی آیتم‌ها درون سلول گرید. (start, end, center, stretch).
  • place-items: میانبری برای align-items justify-items.
  • کل گرید (کانتینر):
  • justify-content: تراز افقی کل گرید درون کانتینر، اگر محتوای گرید کوچکتر از کانتینر باشد.
  • align-content: تراز عمودی کل گرید درون کانتینر.
  • place-content: میانبری برای align-content justify-content.

۶. ایجاد گرید واکنش‌گرا

با استفاده از ترکیب repeat(), auto-fit, minmax(), و fr می‌توان گرید واکنش‌گرایی ایجاد کرد که تعداد ستون‌های آن با تغییر اندازه صفحه، به طور خودکار تنظیم می‌شود.

CSS Grid یک ابزار بسیار قدرتمند برای ایجاد طرح‌بندی‌های پیچیده وب است و یادگیری آن برای هر طراح و توسعه‌دهنده وب ضروری است.

کلیدواژه ها : CSS Grid-شبکه‌بندی CSS-Grid Layout-Grid Container-Grid Item-Grid Lines-Grid Tracks-Grid Cells-Grid Areas-grid-template-columns-grid-template-rows-gap-grid-column-grid-row-grid-area-justify-items-align-items-