طراحی ریسپانسیو با CSS Grid

۰۱شروع کار با Grid

برای ساخت شبکه کافی است روی عنصر والد display: grid بگذارید و ستون‌ها را تعریف کنید. واحد fr فضای باقی‌مانده را بین ستون‌ها تقسیم می‌کند:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

ویژگی gap فاصله‌ی میان ردیف‌ها و ستون‌ها را تنظیم می‌کند، بدون اینکه به لبه‌ی بیرونی شبکه فاصله اضافه شود؛ همین باعث می‌شود نیازی به حاشیه‌های خاص برای اولین و آخرین آیتم نباشد.

۰۲ریسپانسیو بدون media query

ترکیب auto-fit و minmax() به مرورگر اجازه می‌دهد خودش تعداد ستون‌ها را بر اساس عرض موجود تعیین کند:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

در این مثال هر کارت حداقل ۲۶۰ پیکسل عرض دارد. در صفحه‌ی بزرگ چند ستون ساخته می‌شود و در موبایل به‌طور خودکار یک ستون می‌شود؛ بدون یک خط media query.

برای نمونه‌ی واقعی چنین چیدمانی، نمونه‌کارهای ما را ببینید.

۰۳چیدمان با grid-template-areas

برای صفحه‌های کامل، نام‌گذاری ناحیه‌ها خوانایی کد را بالا می‌برد و تغییر چیدمان در عرض‌های مختلف را بسیار ساده می‌کند:

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  grid-template-columns: 1fr 320px;
}

@media (max-width: 800px) {
  .page {
    grid-template-areas: "header" "main" "aside" "footer";
    grid-template-columns: 1fr;
  }
}

۰۴Grid یا Flexbox؟

این دو رقیب نیستند و در کنار هم کار می‌کنند. قاعده‌ی ساده:

• Flexbox: چیدمان یک‌بعدی (یک ردیف یا یک ستون)، مثل نوار ناوبری یا گروهی از دکمه‌ها.
• Grid: چیدمان دوبعدی که ردیف و ستون را هم‌زمان کنترل می‌کند، مثل شبکه‌ی کارت‌ها یا ساختار کل صفحه.

نکته‌ی تکمیلی: ویژگی subgrid که حالا در مرورگرهای مدرن پشتیبانی می‌شود، اجازه می‌دهد آیتم‌های تودرتو از ردیف‌ها و ستون‌های والد پیروی کنند و مثلاً عنوان و دکمه‌ی کارت‌های هم‌ردیف دقیقاً هم‌تراز شوند.

برای حرکت و انتقال میان حالت‌های چیدمان، انیمیشن‌های روان با CSS و JavaScript را بخوانید؛ برای تکرار‌پذیری، اصول کامپوننت‌نویسی کمک می‌کند.

۰۵دسترس‌پذیری و ترتیب محتوا

Grid اجازه می‌دهد ترتیب بصری را از ترتیب سند جدا کنید (با order یا جای‌گذاری صریح)، اما صفحه‌کلید و صفحه‌خوان‌ها همچنان ترتیب DOM را دنبال می‌کنند. اگر این دو با هم نخوانند، تجربه‌ی کاربر دچار سردرگمی می‌شود.

• ساختار HTML را اول بر اساس منطق محتوا بنویسید.
• تغییر ترتیب بصری را فقط وقتی لازم است و با آزمون صفحه‌کلید انجام دهید.
• برای جهت راست‌به‌چپ از ویژگی‌های منطقی مثل margin-inline استفاده کنید.

فهرست کامل را در چک‌لیست دسترس‌پذیری وب و مستندات MDN ببینید.