مناطق Grid في CSS
درس عناصر Grid علّم أرقام الخطوط وspan. المناطق المسماة تطرح سؤالًا ألطف: هل يمكنك رسم الصفحة بكلمات — header وsidebar وmain وfooter — ويدّعي كل طفل ملصقًا؟ grid-template-areas هي الخريطة؛ grid-area هو الدبوس.
صندوق أدوات مناطق grid
📊 مناطق grid بنظرة واحدة
| خاصية / رمز | المهمة اليومية |
|---|---|
grid-template-areas |
على الحاوية: سلاسل بين علامات اقتباس تسمّي كل خلية |
grid-area |
على العنصر: أي منطقة مسماة يشغلها هذا الطفل |
| اسم مكرر | نفس الاسم في خلايا متجاورة = مستطيل ممتد واحد |
. (نقطة) |
خلية فارغة بلا اسم |
| مسارات القالب | ما زلت تضبط الحجم بـ grid-template-columns / rows |
كل سلسلة بين علامات اقتباس صف واحد من الخريطة. الأسماء داخل الصف تفصلها مسافات. يجب أن يسرد كل صف العدد نفسه من الخلايا، وإلا يصبح القالب غير صالح.
grid-template-areas — ارسم الخريطة
اكتب التخطيط الذي تقصده بملصقات واضحة. غلاف صفحة كلاسيكي غالبًا يبدو أربعة أدوار مسماة عبر ثلاثة صفوف.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — ثبّت كل طفل
كل طفل يختار اسمًا واحدًا من الخريطة. أسماء الفئات يمكن أن تبقى بأسلوب BEM؛ رمز المنطقة هو ما يقرؤه Grid.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
الامتداد بتكرار الاسم
لتمديد منطقة، اكتب نفس الاسم في كل خلية يجب أن تنتمي إليها. يجب أن تبقى المنطقة مستطيلًا متصلًا — بلا أشكال L.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
خلايا فارغة بنقطة
. وحيدة تعلّم فجوة. مفيدة حين تحتاج لوحة بطاقات فراغًا دون اختراع اسم وهمي.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
عادة هادئة للمناطق المسماة
ارسم الخريطة في grid-template-areas، واضبط أحجام المسارات بـ columns/rows، ثم ثبّت الأطفال بـ grid-area. أبقِ الأسماء قصيرة ومستطيلة. ارجع إلى grid-column / grid-row حين يكون تموضع لمرة أوضح من إعادة كتابة الخريطة كلها. إعادة كتابة الخريطة المتجاوبة تنتظر درس Grid Responsive.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
جرّب بنفسك
- ارسم خريطة header / aside+main / footer بـ
grid-template-areas. - عيّن أربعة أطفال بقيم
grid-areaمطابقة. - ابنِ بطلًا بثلاثة أعمدة يكرر
heroعبر الصف الأول. - اترك خلية فارغة بـ
.في لوحة اثنين في اثنين. - أبقِ أحجام المسارات على الحاوية؛ سجّل تبديل الخريطة لدرس Grid المتجاوب التالي.
أخطاء شائعة
- تسمية منطقة بشكل L أو غير متصلة (المناطق يجب أن تكون مستطيلات)
- عدد خلايا غير متطابق بين الصفوف المقتبسة
- وضع
grid-template-areasعلى طفل بدل الحاوية - معاملة أسماء المناطق كمنتقي فئات CSS — إنها رموز قالب
- حذف
grid-template-columns/rowsعلى أمل أن الأسماء وحدها تضبط الأحجام
ملخص
- المناطق المسماة تحوّل التخطيط إلى خريطة خلايا مقروءة
grid-template-areasعلى الحاوية؛grid-areaعلى كل عنصر- كرر الاسم للامتداد؛ استخدم
.للخلايا الفارغة - أبقِ المناطق مستطيلة واربط الأسماء بتحجيم المسارات
- تموضع الخطوط ما زال يعمل؛ تغييرات الخريطة المتجاوبة تأتي لاحقًا
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى