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