في الدرس السابق من مسار CSS، تناولنا كيفية التحكم في تخطيط العناصر وتوزيع الفراغات باستخدام تقنيات مرنة، لكن عندما يتعلق الأمر ببناء الهيكل الأساسي للصفحة بأكملها — أي توزيع الأعمدة والصفوف الرئيسية — فإن نظام تخطيط الشبكة (CSS Grid) يمثل النقلة النوعية الأهم للمطورين. تخطيط الشبكة أو CSS Grid هو النظام الوحيد في لغة CSS المصمم خصيصاً للتحكم ثنائي الأبعاد (2D). هذا يعني أنه يمكنك التحكم في العناصر على محورين أفقي وعمودي في نفس الوقت، على عكس Flexbox الذي صُمم أساساً للتعامل مع الاتجاه الأحادى (سواء صف أو عمود).

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

مفاهيم أساسية لبناء الهيكل الثنائي

لكي تبدأ في استخدام CSS Grid بكفاءة، يجب أن تفهم أولاً الفارق بين العنصر الأب الذي يتحول إلى حاوية شبكية (Grid Container)، والعناصر الابنة التي تصبح عناصر شبكية (Grid Items). عندما تمنح عنصراً ما الخاصية display: grid، فإنك لا تقوم فقط بتغيير سلوكه المرئي، بل تفعل نظام إحداثيات كامل يعتمد على ثلاثة عناصر أساسية:

• الخطوط (Grid Lines): الخطوط العمودية والأفقية التي تفصل بين مسارات الشبكة وتُستخدم لتحديد مواقع العناصر بدقة.
• المسارات (Grid Tracks): المساحات الواقعة بين خطوط الشبكة المتتالية، والتي تمثل الأعمدة والصفوف الفعليّة.
• الفراغات (Grid Gaps): المسافات الفاصلة بين المسارات والتي تُنظم التباعد دون الحاجة لهوامش خارجية.

الفرق الجوهري بين Grid و Flexbox في بناء الهيكل يكمن في الفلسفة التصميمية؛ فبينما يبدأ Flexbox من المحتوى الداخلي ثم يوزع المساحة المتاحة بناءً على حجمه، يبدأ Grid من الهيكل الخارجي نفسه (القالب المسبق) ثم يضع المحتوى داخل هذا القالب. هذا يجعل Grid الأداة المثالية لتصميم تخطيطات الصفحات الكبرى (Layouts) مثل ترويسة الصفحة، الشريط الجانبي، منطقة المحتوى الأساسي، والتذيلة.

تعريف الأعمدة والصفوف باستخدام الوحدات الحديثة

لبناء هيكل صفحة متجاوب (Responsive) دون الحاجة للكثير من استعلامات الوسائط (Media Queries)، يقدم CSS Grid وحدات قياس متقدمة، أبرزها وحدة الكسر fr (Fraction). هذه الوحدة تسمح لك بتوزيع المساحة المتاحة بناءً على نسب مرنة بدلاً من الاعتماد الكلي على البيكسل أو النسب المئوية المعقدة، إلى جانب استخدام دوال قوية مثل repeat() و minmax().

دعنا نستعرض مثالاً عملياً متكاملاً لهيكل صفحة ويب حديثة يتكون من ترويسة (Header)، شريط جانبي (Sidebar)، محتوى رئيسي (Main Content)، وتذيلة (Footer):

<div class="page-grid">
  <header class="site-header">الترويسة</header>
  <aside class="site-sidebar">الشريط الجانبي</aside>
  <main class="site-main">المحتوى الرئيسي</main>
  <footer class="site-footer">التذيلة</footer>
</div>

الآن، سنكتب كود CSS الخاص بهذا الهيكل وتوزيع المساحات بشكل احترافي:

.page-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.site-header {
  grid-area: header;
  background-color: #2c3e50;
  color: #fff;
  padding: 20px;
}

.site-sidebar {
  grid-area: sidebar;
  background-color: #ecf0f1;
  padding: 20px;
}

.site-main {
  grid-area: main;
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #dcdde1;
}

.site-footer {
  grid-area: footer;
  background-color: #34495e;
  color: #fff;
  padding: 20px;
}

شرح المثال وكيفية عمل خصائص الشبكة

في الكود السابق، قمنا بتوظيف عدة خصائص جوهرية لبناء الهيكل وتوزيع العناصر:

• display: grid: تحويل الحاوية إلى شبكة تفاعلية تستقبل القواعد الثنائية.
• grid-template-columns: 250px 1fr: يحدد هذا السطر عمودين؛ الأول بقيمة ثابتة عرضها 250 بكسل مخصصة للشريط الجانبي، والثاني بوحدة 1fr مما يعني أنه سيأخذ كل المساحة المتبقية بمرونة تامة.
• grid-template-rows: auto 1fr auto: يحدد ثلاثة صفوف؛ الصف الأول بارتفاع تلقائي للترويسة بناءً على محتواها، الصف الأوسط يتمدد ليملأ الفراغ المتاح (1fr)، والصف الأخير بارتفاع تلقائي للتذيلة.
• grid-template-areas: هذه الخاصية هي إحدى أقوى ميزات CSS Grid لبناء الهيكل، حيث تتيح لك "رسم" شكل الصفحة بصرياً داخل النص البرمجي، وتوزيع العناصر الابنة بناءً على الأسماء التي حددتها باستخدام grid-area.
• gap: 20px: تُنشئ مسافات منتظمة ومتساوية بين الأعمدة والصفوف دون الحاجة لإضافة هوامش (Margins) معقدة أو حسابات رياضية شاقة على العناصر الفردية.

تقنيات متقدمة: الشبكة التلقائية (Auto-fit و Auto-fill)

عند بناء شبكات لعرض البطاقات (Cards) أو المنتجات في المتاجر الإلكترونية، لا نريد غالباً تحديد عدد الأعمدة يدوياً لكل شاشة، بل نريد من المتصفح أن يضع أكبر عدد ممكن من الأعمدة بناءً على عرض الشاشة المتاح. هنا يأتي دور الدالة repeat() مع الكلمتين المفتاحيتين auto-fill أو auto-fit بجانب الدالة minmax().

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

هذا السطر البسيط يعني: قم بإنشاء أعمدة بشكل تلقائي، بحيث لا يقل عرض أي عمود عن 280 بكسل، وإذا كانت هناك مساحة إضافية، قم بتوزيعها بالتساوي عبر وحدة 1fr. الفارق الأساسي بين auto-fill و auto-fit يكمن في كيفية تعاملهما مع العناصر الفارغة؛ حيث تحافظ auto-fill على المسارات الفارغة بينما تقوم auto-fit بتوسيع العناصر الموجودة لملء المساحة المتاحة، وهذا الأسلوب يلغي تماماً الحاجة لاستخدام استعلامات الوسائط (Media Queries) المتعددة للشاشات المتوسطة والصغيرة.

الأخطاء الشائعة عند استخدام CSS Grid

حتى مع الخبرة المتوسطة، قد يقع المطورون في بعض الفخاخ الشائعة التي تؤثر سلباً على سلوك الشبكة واستقرار التصميم:

• الاعتماد المفرط على الارتفاعات الثابتة: إجبار الصفوف على أخذ ارتفاعات ثابتة بالبكسل يؤدي غالباً إلى تداخل النصوص أو خروج المحتوى عن حدوده عندما يصبح النص طويلاً أو يتغير حجم خط المستخدم. يفضل دائماً استخدام الوحدات المرنة أو الاعتماد على min-height.
• الخلط بين ميزات التعويم والعناصر الشبكية: العناصر داخل الشبكة تفقد خصائص معينة مثل float و vertical-align، ومحاولة استخدامها قد تعطل الحسابات الرياضية للشبكة أو تتسبب في نتائج غير متوقعة.
• تجاهل أبعاد الحاوية الأب: إذا لم تقم بتحديد أبعاد أو قيود واضحة للحاوية الأب (مثل استخدام max-width أو نسب واضحة)، فقد تتصرف وحدات fr بطرق غير متوقعة لأن المساحة المتاحة للمتصفح غير محددة بدقة.

طريقة فحص وتصحيح الشبكات

أفضل طريقة للتحقق من صحة هيكل الشبكة ومعالجة المشاكل هي استخدام أدوات المطورين في المتصفحات الحديثة (مثل Firefox Developer Tools أو Chrome DevTools). عند تفتيش عنصر يحمل الخاصية display: grid، ستجد علامة مميزة بجانب اسم الخاصية في لوحة المطورين تتيح لك تفعيل "Grid Overlay".

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

خلاصة الدرس

يُعد تخطيط الشبكة (CSS Grid) الأداة الأقوى في ترسانة مطور الويب لهندسة هياكل الصفحات بدقة وثبات. من خلال فهم نظام الإحداثيات الثنائية، واستخدام وحدات القياس المرنة مثل fr، والاستفادة من تخطيطات المناطق (Grid Areas)، يمكنك بناء صفحات متجاوبة ونظيفة بكود أقل بكثير مقارنة بالطرق التقليدية. في الدرس القادم، سننتقل إلى مرحلة أكثر تقدماً تتمثل في دمج Grid مع Flexbox لحل أعقد التحديات التصميمية في واجهات المستخدم الحديثة.