خاصية مسار الصف الضمني
آخر تحديث: 2026-09-13
grid-auto-rows خاصية مسار الصف الضمني
تتحكم خاصية grid-auto-rows في ارتفاع مسارات الصفوف المنشأة ضمنياً في حاوية الشبكة. عند وضع عنصر شبكة في صف لم يُعرّفه grid-template-rows، ينشئ المتصفح صفاً ضمنياً تلقائياً؛ وتضبط هذه الخاصية حجم تلك الصفوف المُنشأة تلقائياً. وتضمن أن الصفوف غير المعرّفة صراحةً تظل متسقة الارتفاع.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
grid-auto-rows: <track-size>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | يُحسب تلقائياً |
<length> | <percentage> | النوع | ارتفاع ثابت للصف الضمني |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-auto-rows | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يجعل grid-auto-rows: auto ارتفاعات الصفوف الضمنية مُقادة بالمحتوى بالكامل، ما قد ينتج ارتفاعات صفوف غير متساوية.
تلميح： يضمن minmax(80px, auto) ارتفاعاً أدنى مع السماح للصفوف ذات المحتوى الأكبر بالنمو تلقائياً.
❓ الأسئلة الشائعة
Qما هي القيمة الافتراضية لـ grid-auto-rows؟
Aالافتراضي هو auto: يُحدد ارتفاع الصف الضمني بأطول محتوى عنصر في ذلك الصف. لذلك، وبدون grid-auto-rows، تختلف ارتفاعات الصفوف في شبكة متعددة الصفوف حسب المحتوى. تذكر أن الصفوف الضمنية توجد فقط للعناصر الموضوعة خارج الصفوف الصريحة المعرّفة بـ grid-template-rows؛ أما الصفوف التي أعلنتها صراحة فتُحجَم بتلك الخاصية، بينما يعود كل صف آخر إلى grid-auto-rows. ولفرض صفوف متسقة، اضبط صراحةً grid-auto-rows: 100px أو minmax(100px, auto) لتجاوز السلوك الافتراضي.
Qكيف أجعل جميع الصفوف بنفس الارتفاع؟
Aاضبط grid-auto-rows: 1fr أو ارتفاعاً ثابتاً مثل 100px لتطابق الصفوف الضمنية مع الصريحة. يناسب 1fr الصفوف التي يجب أن تتناسب مع الحاوية، ولكنه ذو معنى فقط عندما يكون للحاوية ارتفاع محدد؛ وإلا ينهار الصف إلى حجم محتواه. والقيمة الثابتة تناسب قوائم البطاقات التي تحتاج إلى مظهر منتظم مرتب. وإذا كان عدد الصفوف ثابتاً والبنية واضحة، فتعريف جميع الصفوف بـ grid-template-rows أنظف.
Qماذا يعني grid-auto-rows: minmax(100px, auto)؟
Aيحدد minmax نطاقاً لارتفاعات الصفوف: حد أدنى 100px وحد أقصى auto (ينمو مع المحتوى)، لذا يكون كل صف بارتفاع أدنى 100px وينمو تلقائياً عندما يكون المحتوى أطول، دون قطعه أبداً. مقارنةً بارتفاع ثابت، يحافظ minmax(100px, auto) على ترتيب البطاقات وأمان المحتوى؛ وبالمقارنة مع auto الخالص، يتجنب أن تصبح الصفوف قصيرة جداً ومتفرقة بصرياً عند قلة المحتوى.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
