في هذا الدرس 6تصفّح المواضيع
بينما تتألق أصناف الامتداد في توزيع صفوف البطاقات، يحتاج الهيكل المعماري الكامل لصفحة الويب—المؤلف من الشريط العلوي وقائمة التنقل والمحتوى الرئيسي والشريط الجانبي والتذييل—إلى إعادة تشكيل شاملة لمواقع المناطق بين شاشة الهاتف الضيقة وشاشة الحاسوب العريضة.
يتيح دمج خاصية المناطق المسماة grid-template-areas مع استعلامات @media إعادة رسم خريطة الصفحة بأكملها من داخل الحاوية الأب وحدها؛ فتظل عناصر HTML الدلالية مرتبة في المصدر بتسلسل منطقي نظيف واحد بينما تتكفل الأنماط بإعادة توزيع المسارات والمناطق عند كل نقطة توقف.
لتجهيز الهيكل المعماري القياسي لصفحة موقع متكامل، نمنح كل عنصر دلالي صنفاً مسطحاً بسيطاً يسند إليه اسماً واضحاً عبر خاصية grid-area مرة واحدة فقط. لاحظ أن هذه الأصناف الخمسة لا تحتوي على أي عرض أو رقم عمود أو استعلام وسائط، بل تعرّف هوية كل منطقة فحسب (header وnav وmain وaside وfooter):
.area-header { grid-area: header; }
.area-nav { grid-area: nav; }
.area-main { grid-area: main; }
.area-aside { grid-area: aside; }
.area-footer { grid-area: footer; }تطبيقاً لمنهجية الهاتف أولاً، تعرّف القاعدة الأساسية للحاوية .page-shell خارج أي استعلام وسائط عموداً مرناً واحداً grid-template-columns: 1fr; وترصّ المناطق الخمس عمودياً بالترتيب المنطقي القرائي، بحيث يصل زائر الهاتف إلى المحتوى الأساسي main قبل الملحقات الجانبية aside دون أي تمرير أفقي:
.page-shell {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
gap: 10px;
}والآن نضيف استعلامي min-width تصاعديين يعدّلان الحاوية .page-shell وحدها دون المساس بأي عنصر ابن! فعند عرض 768px للوحي نوسّع الشبكة إلى عمودين 180px 1fr لتستقر القائمة بجانب المحتوى، وعند عرض 1024px للحاسوب ننتقل إلى ثلاثة أعمدة 180px 1fr 200px مع grid-template-rows: auto 1fr auto; ليتمدد الصف الأوسط تلقائياً:
@media (min-width: 768px) {
.page-shell {
grid-template-columns: 180px 1fr;
grid-template-areas: "head head" "nav main";
}
}
@media (min-width: 1024px) {
.page-shell {
grid-template-columns: 180px 1fr 200px;
grid-template-areas: "nav main aside";
}
}تبرز إحدى أقوى مزايا CSS Grid في المنصات ثنائية اللغة العربية والإنجليزية في الانعكاس التلقائي للمحور الأفقي. فعند كتابة السطر "nav main aside" توضع المنطقة الأولى nav عند حافة بداية القراءة، وتوضع المنطقة الثالثة aside عند حافة نهاية القراءة تلقائياً.
في الواجهة الإنجليزية ذات dir="ltr" تظهر قائمة nav يساراً وaside يميناً، وبمجرد التحويل إلى العربية dir="rtl" تنعكس الأعمدة الثلاثة فوراً فتستقر nav على اليمين وaside على اليسار دون تكرار سطر واحد داخل استعلامات @media! ويمكنك التحقق من حدود المناطق وأسمائها مباشرةً بالنقر على شارة grid في أدوات المطور وتفعيل خيار إظهار أسماء المناطق داخل لوحة Layout.
يجمع مهندسو الواجهات المحترفون بين التجاوب الذاتي التلقائي للشبكة واستعلامات @media الشرطية بتكامل ذكي: فنستخدم grid-template-areas مع نقاط التوقف لتشكيل الهيكل الخارجي العام للصفحة، ونضع بداخل منطقة <main> شبكة ذاتية عبر repeat(auto-fit, minmax(220px, 1fr)) لتوزيع البطاقات المتماثلة تلقائياً!
| هدف التخطيط | التقنية الموصى بها | سبب ملاءمتها الهندسية |
|---|---|---|
| الهيكل العام للصفحة (علوي، تنقل، رئيسي، جانبي، تذييل) | grid-template-areas مع @media | يعيد توزيع المناطق المختلفة بدقة مدروسة لكل فئة شاشة |
| معرض بطاقات متماثلة داخل المحتوى | repeat(auto-fit, minmax(220px, 1fr)) | يلف البطاقات المتساوية تلقائياً دون استعلامات إضافية |
| صف لوحة تحكم متفاوت النسب | repeat(12, 1fr) مع .col-md-6 | يحاذي الألواح المتفاوتة على مسارات عمودية منضبطة |
| واجهة ثنائية اللغة عربي وإنجليزي | شبكة مسماة مع سمة dir="rtl" | يعكس مواقع الأعمدة وعروضها تلقائياً بلا تكرار |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت تسمية مناطق الصفحة الدلالية عبر grid-area ورصّها للهاتف أولاً ثم إعادة تشكيل خريطتها عند نقطتي 768px و1024px مع الاستفادة من الانعكاس التلقائي للاتجاه وفحصها في أدوات المطور. وفي الخطوة التالية ننتقل إلى درس فيديو متجاوب مع جميع الأجهزة في لغة CSS لضبط تحجيم مشغلات الفيديو والإطارات المضمنة بحفظ تناسب أبعادها على كافة الشاشات.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Holy Grail Page Layout الهيكل المعماري القياسي للصفحة
- تخطيط الصفحة المتكامل الذي يضم منطقة علوية وتذييلاً بكامل العرض وبينهما ثلاثة أعمدة للتنقل والمحتوى الرئيسي والجانبي.
- للمراجعة
- 02 Named Grid Area منطقة الشبكة المسماة
- اسم دلالي يُسند للعنصر عبر خاصية grid-area ويُحدَّد موقعه البصري داخل الخريطة النصية grid-template-areas في الأب.
- للمراجعة
- 03 Empty Cell Dot Token نقطة الخلية الفارغة
- حرف النقطة داخل خريطة grid-template-areas الذي يترك خلية محددة فارغة في التخطيط دون إضافة عناصر وهمية للمستند.
- للمراجعة
- 04 Inline-Axis Grid Mirroring انعكاس محور الشبكة التلقائي
- عكس ترتيب أعمدة الشبكة تلقائياً من اليمين إلى اليسار عند وجود سمة dir="rtl" دون إعادة كتابة الأنماط.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- ترتيب شجرة المستند الذي تتبعه لوحة المفاتيح وقارئات الشاشة بغض النظر عن الترتيب البصري لمناطق الشبكة.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- اتجاه التخطيط من اليمين إلى اليسار حيث يبدأ العمود الأول في خريطة المناطق المسماة عند الحافة اليمنى.
- للمراجعة
- 03 LTR LTR
- Left-to-Right
- اتجاه التخطيط من اليسار إلى اليمين حيث يبدأ العمود الأول في خريطة المناطق المسماة عند الحافة اليسرى.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال المناطق المسماة المتجاوبة وعاين نقطة التوقف 768px حيث تمتد منطقة nav في العمود الجانبي ويتتابع main ثم aside في العمود المقابل.
-
في نفس المثال التفاعلي أضف السمة dir="rtl" إلى وسم <html> وتأكد عند عرض 1024px من انتقال قائمة التنقل لليمين والشريط الجانبي لليسار دون تعديل أي سطر في CSS.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.