آموزش جامع CSS Grid: سیستم صفحه‌بندی دو بعدی در وب از صفر تا پیشرفته

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

CSS Grid چیست و چرا باید از آن استفاده کنیم؟

پاسخ کوتاه: CSS Grid یک سیستم چیدمان دو بعدی (2D) در CSS است که به شما اجازه می‌دهد عناصر صفحه را به‌طور هم‌زمان در قالب سطرها و ستون‌ها مدیریت کنید. این ویژگی ساخت قالب‌های پیچیده وب را بسیار ساده‌تر از روش‌های قدیمی مانند Float یا Position می‌سازد.

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

مفاهیم پایه: کانتینر (Grid Container) و آیتم‌ها (Grid Items)

برای شروع کار با گرید، کافی است ویژگی display: grid یا display: inline-grid را به عنصر والد (Grid Container) اختصاص دهید. تمام فرزندان مستقیم این عنصر به‌طور خودکار تبدیل به آیتم‌های گرید (Grid Items) می‌شوند.

تعریف ستون‌ها و سطرها با grid-template

برای مشخص کردن تعداد و اندازه ستون‌ها و سطرها، از دو ویژگی اصلی استفاده می‌کنیم:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

در مثال بالا، واحد fr (Fractional Unit) نشان‌دهنده سهمی از فضای خالی باقی‌مانده است. ستون وسط تمام فضای باقی‌مانده بین دو ستون ۲۰۰ پیکسلی را پر می‌کند. ویژگی gap نیز فاصله بین سطرها و ستون‌ها را مشخص می‌کند. برای ساخت ساختار اولیه صفحه می‌توانید از تکه‌کدهای HTML استاندارد استفاده کنید.

مقایسه CSS Grid و Flexbox

بسیاری از طراحان نوپا در انتخاب بین Grid و Flexbox دچار تردید می‌شوند. جدول زیر تفاوت‌های کلیدی این دو سیستم را مشخص می‌کند:

طراحی قالب‌های پیچیده با grid-template-areas

یکی از جذاب‌ترین ویژگی‌های CSS Grid، امکان نام‌گذاری نواحی مختلف صفحه و چیدمان بصری آن‌ها در کد است. این کار خوانایی کد را فوق‌العاده بالا می‌برد.

.site-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

با این روش، تنها با تغییر مقادیر grid-template-areas در Media Query می‌توان جایگاه کل عناصر صفحه را در سایزهای مختلف تغییر داد، بدون اینکه نیاز به تغییر کدهای HTML باشد.

طراحی واکنش‌گرا بدون نیاز به Media Queries

پاسخ کوتاه: با ترکیب تابع repeat()، ویژگی auto-fit (یا auto-fill) و تابع minmax() می‌توانید شبکه‌ای کاملاً واکنش‌گرا بسازید که متناسب با عرض صفحه نمایش، تعداد ستون‌ها را خودکار تنظیم کند.

کد زیر نمونه استاندارد یک گالری یا لیست کارت هوشمند است:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

تفاوت کلیدی auto-fit و auto-fill که اغلب اشتباه می‌شود

• auto-fill: ستون‌های خالی را در صفحه حفظ می‌کند، حتی اگر آیتمی برای پر کردن آن‌ها وجود نداشته باشد (فضای خالی به ستون‌های خیالی اختصاص می‌یابد).
• auto-fit: ستون‌های خالی را فرومی‌ریزد (Collapse می‌کند) و عرض آیتم‌های موجود را کش می‌دهد تا تمام فضای خالی صفحه را پر کنند.

ویژگی Subgrid و حل مشکل هم‌ترازی کارت‌ها

یکی از مشکلات همیشگی طراحان، هم‌تراز کردن اجزای داخلی کارت‌ها (مانند عنوان، تصویر و دکمه خرید) در سطرهای مختلف بوده است. ویژگی subgrid این مشکل را حل کرده است. وقتی فرزند یک گرید مقادیر grid-template-rows: subgrid را دریافت می‌کند، سطرها و خطوط گرید اصلی والد خود را به ارث می‌برد.

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

با این روش، بدون توجه به میزان متن عنوان در یک کارت، عناوین تمام کارت‌های هم‌سطر به‌طور دقیق در یک خط افقی قرار می‌گیرند.

چالش‌های دسترسی‌پذیری و ترتیب خوانش (Accessibility)

قدرت CSS Grid در تغییر ترتیب بصری عناصر (با استفاده از order یا چیدمان دستی در خطوط گرید) می‌تواند یک تله بزرگ برای دسترسی‌پذیری (Accessibility) باشد. صفحه خوان‌ها (Screen Readers) و کاربران کلید Tab، صفحه را بر اساس ترتیب عناصر در DOM خوانش می‌کنند، نه آنچه بصری روی صفحه دیده می‌شود.

عیب‌یابی سریع و مشکلات رایج

در ادامه سه مشکل رایج در کار با CSS Grid و راه حل عملی آن‌ها بررسی شده است:

1. سرریز شدن متن یا تصاویر از سلول‌های گرید:
   علت: سلول‌های گرید به‌طور پیش‌فرض دارای min-width: auto هستند که مانع از کوچک‌تر شدن آن‌ها از محتوای درونشان می‌شود.
   راه‌حل: به آیتم‌های گرید ویژگی min-width: 0 را بدهید یا در تعریف ستون‌ها از minmax(0, 1fr) به جای 1fr استفاده کنید.
2. عدم اعمال gap در مرورگرهای قدیمی:
   علت: عدم پشتیبانی مرورگر از ویژگی مختصر gap.
   راه‌حل: از مقادیر صریح grid-gap، grid-row-gap و grid-column-gap به‌عنوان fallback استفاده کنید.
3. به هم خوردن گرید هنگام اسکرول بار (Scrollbar):
   علت: اضافه شدن عرض اسکرول‌بار مرورگر به محاسبات viewport.
   راه‌حل: استفاده از واحد 1fr به جای 100vw برای کانتینر اصلی.

پرسش‌های متداول