جاري التحميل...

حاوي Grid

حاوي Grid (Grid Container) هو العنصر الأساسي في نظام CSS Grid، حيث يُعتبر بمثابة الإطار الذي يُنظم داخله جميع العناصر (Grid Items) بطريقة مرتبة على شكل صفوف وأعمدة. يمكن تشبيه حاوي Grid ببناء منزل: فهو يحدد هيكل الغرف (Grid Cells) وموقع الأثاث (العناصر) داخلها، مما يتيح تنظيم المحتوى بطريقة واضحة ومرنة. استخدام حاوي Grid في مواقع الأخبار (news site) يضمن ترتيب المقالات والصور بطريقة جذابة، بينما في المتاجر الإلكترونية (e-commerce) يمكن ترتيب المنتجات بشكل متناسق وسهل التصفح. أما في الصفحات الشخصية (personal page) أو بوابات الحكومة (government portal)، فيتيح إنشاء تخطيطات معقدة بسهولة ومرونة، مع القدرة على التكيف مع الشاشات المختلفة.
في هذا الدرس، سيتعلم المتعلمون كيفية إنشاء حاويات Grid متقدمة، ضبط صفوف وأعمدة بطرق ديناميكية، استخدام الفجوات (gap) بين العناصر، وتطبيق إعدادات متقدمة مثل grid-template-areas وauto-placement. كما سيتم توضيح كيفية دمج حاوي Grid مع خصائص أخرى في CSS وHTML لبناء تخطيطات معقدة وقابلة للصيانة، وكيفية استخدامه لتسهيل التفاعل مع JavaScript. هذا المستوى المتقدم مناسب للمطورين الذين يرغبون في التحكم الكامل في التخطيط وتصميم واجهات مستخدم مرنة وقابلة للتوسع.

مثال أساسي

css
CSS Code 
.grid-container {
display: grid; /* تفعيل نظام Grid */
grid-template-columns: 200px repeat(3, 1fr) 100px; /* أعمدة ديناميكية وثابتة */
grid-template-rows: 150px auto 150px; /* صفوف متنوعة */
gap: 20px; /* المسافة بين العناصر */
}

.grid-item {
background-color: #e0f7fa; /* لون خلفية لتوضيح العناصر */
border: 1px solid #00796b; /* إطار العنصر */
}

في هذا المثال، حاوي Grid (.grid-container) هو العنصر الرئيسي الذي يحدد كيفية ترتيب جميع العناصر الفرعية (.grid-item). استخدام display: grid يُفعل نظام Grid للعنصر، مما يسمح باستخدام خصائص مثل grid-template-columns وgrid-template-rows لتحديد الأعمدة والصفوف.
grid-template-columns هنا يحدد أربعة أعمدة: الأول بعرض ثابت 200px، ثلاثة أعمدة متساوية باستخدام repeat(3, 1fr)، والعمود الأخير بعرض ثابت 100px. repeat(3, 1fr) يعني تكرار عمود واحد ثلاث مرات مع توزيع المساحة المتاحة بالتساوي. grid-template-rows يحدد ارتفاع الصفوف: الصف الأول 150px، الصف الثاني ارتفاعه تلقائي (auto) بناءً على المحتوى، والصف الثالث 150px. gap: 20px يخلق مسافة بين جميع العناصر، مماثلة لوضع مسافة بين الأثاث داخل الغرف عند ترتيب منزل.
كل عنصر .grid-item يحصل على لون خلفية وإطار لتوضيح مكانه داخل الحاوي. هذه الطريقة مفيدة في مواقع الأخبار لتنظيم المقالات، أو في المتاجر الإلكترونية لترتيب المنتجات بطريقة متناسقة.

مثال عملي

css
CSS Code 
.dashboard-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
gap: 15px;
}

.header { grid-area: header; background-color: #ffecb3; }
.sidebar { grid-area: sidebar; background-color: #ffe0b2; }
.main { grid-area: main; background-color: #c8e6c9; }
.footer { grid-area: footer; background-color: #b3e5fc; }

في هذا المثال العملي، تم إنشاء لوحة تحكم (dashboard) باستخدام حاوي Grid متقدم. خاصية grid-template-areas تحدد أسماء مناطق الشبكة (grid areas) بطريقة واضحة ومقروءة، حيث يتم تعيين كل عنصر إلى منطقة محددة عبر grid-area.
grid-template-columns يحدد عرض الأعمدة: العمود الأول 200px، والعمودين الآخرين يتشاركان المساحة المتبقية بالتساوي باستخدام 1fr لكل منهما. grid-template-rows يحدد ارتفاع الصفوف: رأس الصفحة (header) 80px، المحتوى الرئيسي (main) تلقائي باستخدام 1fr لتعبئة المساحة المتبقية، والتذييل (footer) 60px. gap: 15px يضيف مسافة بين العناصر، مما يمنح واجهة المستخدم وضوحاً بصرياً.
استخدام grid-template-areas يجعل تصميم تخطيطات معقدة مثل لوحة تحكم إدارية أو صفحات حكومية أسهل بكثير، ويسمح بإعادة ترتيب العناصر ببساطة دون تعديل الأعمدة والصفوف يدوياً. هذا يربط بشكل مباشر بين HTML وCSS لإنشاء واجهات متجاوبة وقابلة للصيانة.

أفضل الممارسات:

  1. اتباع أسلوب Mobile-First لتصميم متجاوب.
  2. استخدام fr بدلاً من وحدات px لتوزيع المساحة بمرونة.
  3. الحفاظ على أسماء مناطق الشبكة descriptive لتسهيل الصيانة.

  4. اختبار التصميم على شاشات متعددة لضمان الأداء البصري.
    الأخطاء الشائعة:

  5. الإفراط في تحديد أحجام ثابتة مما يقلل المرونة.

  6. تجاهل الفجوات (gap) مما يؤدي إلى ازدحام العناصر.
  7. تعارض الخصوصية (specificity) عند دمج CSS متعددة.
  8. محاولة تعديل grid-template-areas بدون مراجعة HTML مما يسبب أخطاء في التخطيط.
    نصائح تصحيح الأخطاء: استخدم أدوات التطوير في المتصفح لفحص مناطق الشبكة، تحقق من أسماء grid-area والتأكد من أن المحتوى داخل كل عنصر لا يخرق الحدود المحددة، وتأكد من توافق جميع الأعمدة والصفوف مع متطلبات التصميم.

📊 مرجع سريع

Property/Method Description Example
display تفعيل Grid Container display: grid;
grid-template-columns تحديد أعمدة الشبكة grid-template-columns: 100px 1fr 2fr;
grid-template-rows تحديد صفوف الشبكة grid-template-rows: 50px auto 50px;
grid-template-areas تعيين أسماء مناطق الشبكة grid-template-areas: "header header" "sidebar main";
gap المسافة بين العناصر gap: 10px;
grid-area تعيين العنصر إلى منطقة معينة grid-area: main;

الخلاصة والخطوات التالية: حاوي Grid هو أساس كل تخطيط معقد في CSS Grid، حيث يحدد البنية الأساسية للصفوف والأعمدة، ويوفر المرونة لتوزيع العناصر داخله بطرق متنوعة. فهم كيفية استخدام grid-template-columns وgrid-template-rows وgrid-template-areas وgap وgrid-area يُمكّن المطور من إنشاء واجهات مستخدم متقدمة، سواء كانت مواقع إخبارية، متاجر إلكترونية، صفحات شخصية أو بوابات حكومية. الخطوة التالية هي تعلم خصائص التمحور (align-items, justify-items) والتوزيع (auto-placement, minmax, repeat) لتعزيز السيطرة على التخطيطات. يُنصح بالممارسة المستمرة على مشاريع حقيقية لضمان اتقان هذه المفاهيم وتطبيقها بفعالية.

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

اختبر فهمك لهذا الموضوع بأسئلة عملية.

❓
3
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 45 من 55
Css درس تعليمي