خاصية المناطق المسماة لـ Grid
آخر تحديث: 2026-09-13
grid-template-areas خاصية المناطق المسماة لـ Grid
تتيح خاصية grid-template-areas تعريف بنية تخطيط الشبكة بصريًا عبر مناطق مسماة. وتمثل كل سلسلة نصية صفًا واحدًا، ويمثل كل معرّف داخل السلسلة المنطقة التي تتبعها خلية؛ فالخلايا المتجاورة التي تحمل نفس الاسم تندمج تلقائيًا في منطقة واحدة. وتحسّن بشكل كبير قابلية قراءة تخطيطات الشبكة وهي مناسبة بوجه خاص لتصاميم الصفحة الكاملة.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
grid-template-areas: none | <string>+;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | لا مناطق مسماة |
<string> | النوع | تعريف اسم المنطقة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-template-areas | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： وبما أن أسماء المناطق مكتوبة مصطفة حسب الصفوف والأعمدة، فإن بنية الصفحة تظهر بلمحة — وهو من أكبر مزايا grid-template-areas.
تحذير： يجب أن يتطابق عدد الخلايا في كل سلسلة مع عدد أعمدة الشبكة، ويجب أن تكون كل منطقة مستطيلة: فالأشكال على شكل L أو غير المنتظمة غير مسموح بها.
❓ الأسئلة الشائعة
Qما هي قواعد أسماء المناطق في grid-template-areas؟
Aيجب أن تكون أسماء المناطق معرّفات CSS صالحة: لا يجوز أن تبدأ برقم، ولا أن تحتوي مسافات أو أحرف خاصة (الشرطات والشرطات السفلية مسموحة)، ولا أن تستخدم كلمات مفتاحية عامة مثل auto أو span. وتعرف كل سلسلة صفًا واحدًا من الشبكة، وتندمج الخلايا المتجاورة التي تشترك في نفس الاسم داخل السلاسل في منطقة واحدة يجب أن تكون مستطيلة — فالأشكال على شكل L أو المنفصلة غير صالحة.
Qكيف أترك خلية فارغة؟
Aاستخدم نقطة واحدة أو أكثر متتالية (.) لتمثيل خلية فارغة، مثلًا "header . ." تترك العمودين الثاني والثالث فارغين. يجب أن يكون لكل سلسلة صف نفس الطول، أي نفس عدد الخلايا، وتُحسب العناصر النائبة الفارغة ضمن عدد الأعمدة. اكتب نقطة واحدة . للخلية التي تريدها فارغة؛ والنقاط الزائدة مجرد مساعدة للقراءة بلا معنى.
Qكيف أنشئ تخطيطًا متجاوبًا باستخدام grid-template-areas؟
Aانقل تعيين المناطق إلى CSS: على سطح المكتب استخدم قالبًا مثل "header header" / "sidebar main"، وفي media query للجوال استبدل القالب بـ "header" / "main" / "sidebar". ولا يزال الأبناء يشيرون إلى أسماء المناطق عبر grid-area ولا يتغير DOM. وأسماء المناطق مجرد تسميات بلا معنى دلالي، فيمكنك إعادة تسميتها بحرية ما دامت مراجع grid-area على العناصر تطابق القالب. وهذا الفصل بين التخطيط والبنية هو جوهر قيمة grid-template-areas.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
