المفاهيم الأساسيّة لنظام التخطيط الشبكي (Grid Layout) في CSS: خطوط الشبكة والخلايا

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

في هذا المقال، سوف نغوص عميقاً في المفاهيم الأساسية لنظام التخطيط الشبكي، مع التركيز بشكل خاص على عنصرين رئيسيين هما: خطوط الشبكة (Grid Lines) والخلايا (Grid Cells). فهم هذين المفهومين ضروري للغاية للتمكن من الاستفادة القصوى من قدرات CSS Grid، وخلق تصاميم منظمة ومتجاوبة مع احتياجات المستخدمين.

مقدمة إلى نظام التخطيط الشبكي في CSS

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

يمكن تصور الـ Grid على أنه شبكة مرسومة داخل حاوية (Container)، حيث تُقسم إلى أعمدة وصفوف، وتتوزع العناصر ضمن هذه الشبكة بحسب قواعد وأوامر يتم تعريفها من خلال خصائص CSS الخاصة بـ Grid.

خطوط الشبكة (Grid Lines)

تعريف خطوط الشبكة

خطوط الشبكة هي الخطوط التي تحدد الحدود بين صفوف وأعمدة الشبكة. يمكن اعتبارها كالإطارات التي تفصل بين خلايا الشبكة المختلفة. خطوط الشبكة تكون مرقمة بطريقة محددة تسهل على المطورين تحديد موقع العنصر داخل الشبكة.

• خطوط الأعمدة: هي الخطوط العمودية التي تفصل بين الأعمدة.

• خطوط الصفوف: هي الخطوط الأفقية التي تفصل بين الصفوف.

ترقيم خطوط الشبكة

يُرقم نظام CSS Grid خطوط الشبكة بداية من الرقم 1، على أن يبدأ ترقيم خطوط الأعمدة من اليسار إلى اليمين، وترقيم خطوط الصفوف من الأعلى إلى الأسفل. كما يمكن ترقيمها سلبياً من الطرف المعاكس، حيث يكون آخر خط هو -1، والخط السابق له -2 وهكذا، مما يتيح مرونة كبيرة في تحديد المواقع.

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

عند تعريف مكان العنصر في الشبكة، يتم استخدام خطوط الشبكة لتحديد نقطة البداية ونقطة النهاية لكل من الصف والعمود. مثلاً، يمكن أن يحدد العنصر أن يبدأ من خط العمود 2 وينتهي عند خط العمود 4، وبالمثل للصفوف.

مثال عملي:

css
CopyEdit
.item {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

هنا يبدأ العنصر في العمود الثاني وينتهي قبل العمود الرابع، ويغطي الصفوف من 1 إلى 3.

الخلايا (Grid Cells)

تعريف الخلايا

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

العلاقة بين الخلايا وخطوط الشبكة

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

حجم الخلايا وكيفية التحكم به

يتم التحكم بحجم الخلايا عبر خاصيتي grid-template-columns و grid-template-rows. يمكن تحديد عرض الأعمدة وارتفاع الصفوف باستخدام وحدات مختلفة مثل البكسل، النسب المئوية، وحدات fr (fractional units) التي تعبر عن نسبة من المساحة المتاحة، أو وحدات أخرى مثل auto.

مثال:

css
CopyEdit
.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
  grid-template-rows: 50px auto 100px;
}

في المثال أعلاه، تم تحديد ثلاثة أعمدة بأحجام مختلفة، والصفوف كذلك. بذلك، كل خلية تنتمي لمجموعة تقاطع بين أحد الأعمدة والصفوف.

التفاعل بين خطوط الشبكة والخلايا في تخطيط العناصر

يتيح نظام CSS Grid التحكم الدقيق في كل من خطوط الشبكة والخلايا مما يوفر عدة مزايا:

• تحديد موقع دقيق: يمكن وضع العناصر بشكل محدد عبر خطوط الشبكة مما يمنع التداخل أو الفوضى.

• المرونة: يمكن أن يمتد العنصر ليشغل خلايا متعددة عن طريق تحديد خطوط بداية ونهاية متباعدة.

• إمكانية التعديل السهل: تعديل خطوط الشبكة يعني تعديل الخلايا المرتبطة بها تلقائياً، مما يسهل تعديل التخطيط.

مزايا استخدام خطوط الشبكة والخلايا

1. تنظيم المحتوى بشكل واضح ومرتب

باستخدام خطوط الشبكة، يمكن تقسيم الصفحة إلى أقسام محددة بدقة، مما يساعد في تنظيم المحتوى بطريقة واضحة ومتناسقة.

2. تحسين تجربة المستخدم

التخطيط الدقيق للشبكة يساهم في تقديم واجهة مستخدم متجاوبة وسلسة، تتكيف مع أحجام الشاشات المختلفة.

3. تقليل الحاجة إلى الكود المعقد

بفضل نظام الخطوط والخلايا، يصبح من السهل تعريف التخطيط بأكواد CSS واضحة ومختصرة، بعكس الطرق القديمة التي تتطلب حلولاً معقدة.

استخدامات عملية لخطوط الشبكة والخلايا

توزيع العناصر ضمن شبكة معقدة

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

إنشاء تصميمات متجاوبة

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

محاذاة المحتوى داخل الخلايا

يمكن محاذاة العناصر داخل كل خلية باستخدام خصائص مثل justify-self و align-self، التي تتحكم في تموضع العنصر داخل مساحة الخلية.

أمثلة عملية على خطوط الشبكة والخلايا

المثال الأول: شبكة 3×3

css
CopyEdit
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  gap: 10px;
}

.item1 {
  grid-column: 1 / 3; /* يمتد عبر العمود الأول والثاني */
  grid-row: 1 / 2;    /* الصف الأول */
}

.item2 {
  grid-column: 3 / 4; /* العمود الثالث */
  grid-row: 1 / 4;    /* يمتد عبر الصفوف الثلاثة */
}

في هذا المثال، item1 يشغل خليتين أفقيتين في الصف الأول، بينما item2 يمتد رأسياً عبر العمود الثالث.

المثال الثاني: شبكة متجاوبة باستخدام fr

css
CopyEdit
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
}

.item {
  grid-column: 2 / 3;
}

هنا، العمود الأوسط يأخذ ضعف مساحة الأعمدة الجانبية، ما يتيح توزيع مساحة مرن داخل الخلايا.

الفرق بين خطوط الشبكة وخطوط المحاذاة في CSS Grid

من المهم التمييز بين خطوط الشبكة التي تحدد حدود الخلايا، وبين خصائص المحاذاة (alignment lines) التي تتحكم في تموضع المحتوى داخل الخلية نفسها، مثل:

• justify-items

• align-items

• justify-self

• align-self

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

جدول توضيحي لبعض خصائص خطوط الشبكة والخلايا في CSS Grid

الخلاصة

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

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

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

المراجع

• MDN Web Docs – CSS Grid Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

• CSS-Tricks – A Complete Guide to Grid: https://css-tricks.com/snippets/css/complete-guide-grid/