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