تسلط بر کوئری‌های ظرف CSS و ساب‌گرید برای چیدمان‌های پیچیده کامپوننت

برای سال‌ها، کوئری مدیا CSS ستون فقرات طراحی وب واکنش‌گرا بوده است. این ویژگی به توسعه‌دهندگان اجازه می‌داد تا چیدمان‌ها را بر اساس اندازه صفحه نمایش (موبایل، تبلت یا دسکتاپ) تطبیق دهند. با این حال، این رویکرد یک محدودیت اساسی دارد: کامپوننت‌ها بر اساس اندازه صفحه استایل‌دهی می‌شوند، نه اندازه ظرف خودشان. در یک معماری فرانت‌اند مدرن، این موضوع اغلب منجر به کدهای حجیم می‌شود که در آن‌ها یک کامپوننت واحد، بسته به محل قرارگیری‌اش در DOM، رفتارهای متفاوتی از خود نشان می‌دهد. در اینجا دو ویژگی قدرتمند CSS وارد میدان می‌شوند که چشم‌انداز طراحی مبتنی بر کامپوننت را دگرگون می‌کنند: کوئری‌های ظرف (Container Queries) و ساب‌گرید CSS (CSS Subgrid).

محدودیت استایل‌دهی مبتنی بر صفحه نمایش

یک کامپوننت کارت را تصور کنید که در دسکتاپ یک تصویر بزرگ و متن توضیحاتی را نمایش می‌دهد، اما در موبایل به یک نمای لیست فشرده تغییر وضعیت می‌دهد. به طور سنتی، شما باید کوئری‌های مدیا پیچیده‌ای را برای مدیریت این تغییر وضعیت می‌نوشتید. اما اگر همان کامپوننت کارت را درون یک نوار کناری (sidebar) در دسکتاپ قرار دهید چه می‌شود؟ ممکن است به دلیل باریک بودن نوار کناری، نیاز باشد که به نمای فشرده تغییر کند، حتی اگر صفحه نمایش عریض باشد. با کوئری‌های مدیا، دستیابی به این مورد بدون تکرار منطق یا استفاده از راه‌حل‌های نادرست جاوااسکریپت دشوار است.

اینجاست که کوئری‌های ظرف درخشش خود را نشان می‌دهند. با اجازه دادن به استایل‌ها برای تطبیق بر اساس ابعاد ظرف والد، آن‌ها کامپوننت‌های واقعاً ماژولار و مستقل را امکان‌پذیر می‌سازند. یک کامپوننت اکنون می‌تواند از زمینه خود آگاه باشد و بدون نیاز به تغییر، در چیدمان‌های مختلف قابل استفاده مجدد باشد.

پیاده‌سازی کوئری‌های ظرف

برای استفاده از کوئری‌های ظرف، ابتدا باید یک container-type را روی عنصر والد تعریف کنید. این کار عنصر را به عنوان یک ظرف کوئری ظرف مشخص می‌کند. سپس می‌توانید ابعاد خاصی را با استفاده از قوانین @container پرس‌وجو کنید.

.card-wrapper {
  /* تعریف نوع ظرف */
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
}

/* پرس‌وجو از عرض ظرف */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  
  .card-image {
    width: 40%;
  }
  
  .card-content {
    width: 60%;
  }
}

در این مثال، کارت تا زمانی که ظرف آن حداقل ۴۰۰ پیکسل عرض داشته باشد، به صورت عمودی چیده می‌شود و در آن نقطه به یک چیدمان افقی تغییر وضعیت می‌دهد. این منطق درون کامپوننت بسته‌بندی شده است که باعث پیش‌بینی‌پذیری و قابلیت حمل آن می‌شود.

گشودن راه هم‌ترازی با CSS Subgrid

در حالی که کوئری‌های ظرف مشکل واکنش‌گرایی را حل می‌کنند، هم‌تراز کردن آیتم‌های گرید تو‌در‌تو با ستون‌های گرید والد به طور تاریخی دشوار بوده است. قبل از CSS Subgrid، اگر شما یک گرید را درون گرید دیگری قرار می‌دادید، آیتم‌های داخلی تعاریف ردیف ستون خود را ایجاد می‌کردند که اغلب منجر به عدم هم‌ترازی با گرید بیرونی می‌شد.

CSS Subgrid به یک گرید داخلی اجازه می‌دهد تا ردیف‌های ستون (یا ردیف) را از گرید والد خود به ارث ببرد. این موضوع برای حفظ هم‌ترازی دقیق در چیدمان‌های پیچیده، مانند داشبوردها، گریدهای محصول یا جداول داده، حیاتی است.

.outer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.inner-card {
  display: grid;
  /* به ارث بردن ردیف‌های ستون از والد */
  grid-template-columns: subgrid;
  grid-column: span 3; /* گسترش در تمام ستون‌های والد */
  gap: 0.5rem;
}

.inner-item {
  background: #f0f0f0;
  padding: 1rem;
}

در کد بالا، .inner-card سه ستون از .outer-grid را در بر می‌گیرد. با تنظیم grid-template-columns: subgrid، آیتم‌های داخل .inner-card به طور کامل با سه ستون گرید بیرونی هم‌تراز می‌شوند، حتی اگر آن‌ها زمینه گرید خود را داشته باشند. این موضوع یک چیدمان تمیز و ریاضی‌وار دقیق ایجاد می‌کند که دستیابی به آن با استفاده از فلکس‌باکس تو‌در‌تو یا گریدهای سنتی تقریباً غیرممکن است.

ترکیب برای چیدمان‌های قدرتمند

قدرت واقعی این ویژگی‌ها زمانی آشکار می‌شود که با هم ترکیب شوند. شما می‌توانید یک ویجت داشبورد ایجاد کنید که از Subgrid برای هم‌تراز کردن نقاط داده داخلی خود با گرید اصلی استفاده می‌کند، در حالی که از کوئری‌های ظرف برای تغییر ساختار داخلی خود بر اساس فضای موجود بهره می‌برد. این هم‌افزایی اجازه می‌دهد تا معماری‌های CSS بسیار واکنش‌گرا، قابل نگهداری و از نظر معنایی تمیز ایجاد شوند.

هم‌زمان با اینکه پشتیبانی مرورگرها برای هر دو ویژگی کوئری‌های ظرف و ساب‌گرید به وضعیت تقریباً جهانی می‌رسد (در حال حاضر در تمام مرورگرهای مدرن اصلی پشتیبانی می‌شود)، زمان مناسبی برای به کارگیری این تکنیک‌هاست. دست‌وپنجه نرم کردن با صفحه نمایش را متوقف کنید و شروع به ساخت کامپوننت‌هایی کنید که به فضای خود احترام می‌گذارند. آینده CSS آگاه از کامپوننت است و با کوئری‌های ظرف و ساب‌گرید، شما ابزارهای ساخت آن را در اختیار دارید.