خاصية تحديد موضع منطقة الشبكة
آخر تحديث: 2026-09-13
grid-area خاصية تحديد موضع منطقة الشبكة
grid-area هو اختصار يضع عنصر الشبكة بتعيين القيم الأربع دفعة واحدة: grid-row-start و grid-column-start و grid-row-end و grid-column-end. يعمل بأرقام خطوط الشبكة لتحديد موضع دقيق، أو بمنطقة مسماة معرّفة في grid-template-areas. وهو أكثر الخصائص مرونةً في تحديد موضع الشبكة.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
grid-area: <grid-line> [ / <grid-line> ]{0,3};⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<grid-line> [ / <grid-line> ]{0,3} | القيمة | اختصار منطقة الشبكة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-area | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： عندما تكون قيمة grid-area اسم منطقة، يوضع العنصر في المنطقة المطابقة المعرّفة في grid-template-areas.
تلميح： مع أربع قيم، يكون الترتيب: grid-row-start / grid-column-start / grid-row-end / grid-column-end.
❓ الأسئلة الشائعة
Qهل اختصار grid-area هو نفسه اسم المنطقة؟
Aمرتبطان ولكنهما مختلفان. تُستخدم خاصية grid-area على عنصر شبكة لوضعه؛ وقد تكون قيمتها أربعة أرقام لخطوط الشبكة أو اسم منطقة واحد. والنصوص مثل "header" في قالب grid-template-areas هي معرّفات منطقة. كتابة grid-area: header تشير إلى المنطقة المسماة المعرّفة في القالب — ويرتبط الاثنان من خلال اسم المنطقة.
Qأيهما أفضل، المناطق المسماة أم أرقام خطوط الشبكة؟
Aلا يوجد فائز مطلق. المناطق المسماة هي الأكثر قابلية للقراءة وتناسب تخطيطات الصفحة بأكملها: بمجرد كتابة الأسماء في grid-template-areas، يحتاج العنصر الفرعي فقط إلى grid-area: header للوضع، وتغيير التخطيط يعني تعديل قالب الحاوية فقط. أرقام خطوط الشبكة أكثر دقة لتعديلات الامتداد المحلية، مثل بطاقة يجب أن تعبر عمودين. والمشاريع الفعلية عادةً ما تدمج الاثنين: مناطق مسماة لهيكل الصفحة وخطوط شبكة للتفاصيل الداخلية.
Qماذا تعني القيم الأربع في grid-area: 1 / 1 / 3 / 3؟
Aتقابل القيم الأربع بالترتيب grid-row-start / grid-column-start / grid-row-end / grid-column-end: يبدأ العنصر عند تقاطع الصف 1 والعمود 1 وينتهي عند تقاطع الصف 3 والعمود 3، مشغلاً مستطيلاً 2×2. تذكر الترتيب "بداية الصف، بداية العمود، نهاية الصف، نهاية العمود"؛ والقيم اللاحقة تصبح auto عند حذفها.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
تحديد موضع صف الشبكة
يحدد موضع عنصر الشبكة رأسياً
تحديد موضع عمود الشبكة
يحدد موضع عنصر الشبكة أفقياً
