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