إتقان استعلامات حاوية CSS وشبكة فرعية لتخطيطات المكونات المعقدة

لطالما كانت استعلامات الوسائط في CSS حجر الزاوية في تصميم الويب المتجاوب. سمحت للمطورين بتكييف التخطيطات بناءً على حجم إطار العرض — للجوال أو الجهاز اللوحي أو سطح المكتب. ومع ذلك، فإن هذا النهج له قيد أساسي: يتم تنسيق المكونات بناءً على حجم الصفحة، وليس حجم حاويتها الخاصة. في بنية الواجهة الأمامية الحديثة، غالباً ما يؤدي هذا إلى كود متضخم حيث يتصرف المكون نفسه بشكل مختلف اعتماداً على مكان وضعه في DOM. هنا تظهر ميزتان قويتان في CSS تغيران مشهد التصميم القائم على المكونات: استعلامات الحاوية وشبكة فرعية في CSS.

قيد التنسيق القائم على إطار العرض

تخيل مكون بطاقة يعرض صورة كبيرة ونصاً مفصلاً على سطح المكتب، لكنه يتحول إلى عرض قائمة مختصرة على الجوال. تقليدياً، كنت ستكتب استعلامات وسائط معقدة للتعامل مع هذا التغيير في الحالة. ولكن ماذا يحدث إذا وضعت هذا المكون البطاقة نفسه داخل شريط جانبي على سطح المكتب؟ قد يحتاج إلى التحول إلى العرض المختصر لأن الشريط الجانبي ضيق، حتى لو كان إطار العرض واسعاً. مع استعلامات الوسائط، لا يمكنك تحقيق ذلك بسهولة دون تكرار المنطق أو استخدام حلول برمجية غير نظيفة.

هنا تبرز قوة استعلامات الحاوية. من خلال السماح للتكيف مع الأنماط بناءً على أبعاد الحاوية الأصلية، تتيح هذه الميزة إنشاء مكونات قابلة لإعادة الاستخدام ومعزولة تماماً. يمكن للمكون الآن أن يكون واعياً لسياقه، مما يجعله قابلاً لإعادة الاستخدام عبر تخطيطات مختلفة دون تعديل.

تنفيذ استعلامات الحاوية

لاستخدام استعلامات الحاوية، تحتاج أولاً إلى تعريف container-type على العنصر الأصلي. هذا يحدد العنصر كحاوية لاستعلامات الحاوية. يمكنك بعد ذلك استعلام أبعاد محددة باستخدام قواعد @container.

.card-wrapper {
  /* Define the container type */
  container-type: inline-size;
}

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

/* Query the container's width */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  
  .card-image {
    width: 40%;
  }
  
  .card-content {
    width: 60%;
  }
}

في هذا المثال، ستتراص البطاقة عمودياً حتى تصبح حاويتها بعرض 400 بكسل على الأقل، وعندها تتحول إلى تخطيط أفقي. هذا المنطق محصور داخل المكون، مما يجعله قابلاً للتنبؤ به وقابلاً للنقل.

فتح إمكانيات المحاذاة مع شبكة فرعية في CSS

بينما تحل استعلامات الحاوية مشكلة الاستجابة، كان من الصعب تاريخياً محاذاة عناصر الشبكة المتداخلة مع أعمدة الشبكة الأصلية. قبل إدخال شبكة فرعية في CSS، إذا كان لديك شبكة داخل شبكة أخرى، فإن العناصر الداخلية كانت تنشئ تعريفات مسارات أعمدة خاصة بها، مما يؤدي غالباً إلى عدم المحاذاة مع الشبكة الخارجية.

تسمح شبكة فرعية في CSS لشبكة داخلية بتوريث مسارات الأعمدة (أو الصفوف) من شبكة الأصل. هذا أمر بالغ الأهمية للحفاظ على محاذاة صارمة في التخطيطات المعقدة، مثل لوحات المعلومات، أو شبكات المنتجات، أو جداول البيانات.

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

.inner-card {
  display: grid;
  /* Inherit the column tracks from the parent */
  grid-template-columns: subgrid;
  grid-column: span 3; /* Span across all parent columns */
  gap: 0.5rem;
}

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

في الكود أعلاه، تمتد .inner-card عبر ثلاثة أعمدة من .outer-grid. من خلال تعيين grid-template-columns: subgrid، تتم محاذاة العناصر داخل .inner-card تماماً مع الأعمدة الثلاثة للشبكة الخارجية، حتى وإن كان لديها سياق شبكة خاص بها. هذا يخلق تخطيطاً نظيفاً ودقيقاً رياضياً، وهو أمر شبه مستحيل تحقيقه باستخدام Flexbox المتداخل أو الشبكات التقليدية.

الجمع للحصول على تخطيطات قوية

تظهر القوة الحقيقية لهذه الميزات عند دمجها. يمكنك إنشاء عنصر واجهة في لوحة المعلومات يستخدم شبكة فرعية لمحاذاة نقاط البيانات الداخلية مع الشبكة الرئيسية، بينما يستخدم استعلامات الحاوية لتغيير بنيته الداخلية بناءً على المساحة المتاحة. يسمح هذا التآزر بإنشاء بنية CSS متجاوبة للغاية، وسهلة الصيانة، ونظيفة من الناحية الدلالية.

مع وصول دعم المتصفحات لكل من استعلامات الحاوية وشبكة فرعية إلى حالة شبه عالمية (مدعومة حالياً في جميع المتصفحات الحديثة الرئيسية)، فإن الوقت مثالي لتبني هذه التقنيات. توقف عن محاربة إطار العرض وابدأ ببناء مكونات تحترم مساحتها الخاصة. مستقبل CSS واعٍ للمكونات، ومع استعلامات الحاوية وشبكة فرعية، لديك الأدوات لبنائه.