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