خاصية grid
آخر تحديث: 2026-09-13
grid خاصية grid
الخاصية grid هي اختصار CSS Grid. في إعلان واحد، تُحدّد المسارات الصريحة والمسارات التلقائية واتجاه التدفق التلقائي لحاوية grid. وهي مجموع عائلتي grid-template و grid-auto، وأكمل اختصار للشبكة عندما تريد وصف بنيتها بالكامل.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | جميع العناصر |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
grid: <grid-template> | <grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ]?;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<grid-template> | النوع | اختصار الشبكة الصريحة |
<grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ] | القيمة | اختصار الصفوف/الأعمدة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： في اختصار grid، المسارات قبل الخط المائل / هي الصفوف والمسارات بعده هي الأعمدة، بما يطابق ترتيب كتابة grid-template.
تحذير： يُعيد اختصار grid تعيين كل خاصية grid غير معلنة صراحة، مثل grid-auto-flow. ضع نطاق إعادة التعيين هذا في اعتبارك عند استخدامه.
❓ الأسئلة الشائعة
Qما الفرق بين grid و grid-template؟
Aيعد grid الاختصار الأكثر شمولًا: يعيد تعيين المسارات الصريحة والمسارات الضمنية واتجاه التموضع التلقائي دفعة واحدة، ما يفيد لتهيئة الشبكة من الصفر. أما grid-template فلا يضبط سوى المسارات الصريحة (الصفوف والأعمدة والمناطق) ويترك خصائص grid-auto-* كما هي، لذا له آثار جانبية أقل ويناسب عندما تريد تعديل البنية الصريحة فقط.
Qمتى يجب أن أستخدم اختصار grid؟
Aاستخدم اختصار grid عندما تحتاج إلى تعريف بنية الشبكة بالكامل دفعة واحدة، أو عندما تريد إعادة تعيين جميع خصائص الشبكة ذات الصلة. أما إذا كنت تريد تغيير جزء واحد فقط، مثل عرض العمود، فاستخدم خاصية منفردة مثل grid-template-columns، حتى لا يعيد الاختصار تعيين إعدادات أخرى عن طريق الخطأ. اختر أسلوبًا واحدًا لفريقك واتبعه، لأن مزج الأساليب يؤدي إلى إعادة تعيين مخفية.
Qكيف يُترجم grid: 200px 1fr / 1fr 2fr إلى صفوف وأعمدة؟
Aفي اختصار grid، الجانب الأيسر من الخط المائل هو grid-template-rows (الصفوف) والجانب الأيمن هو grid-template-columns (الأعمدة). لذا فإن grid: 200px 1fr / 1fr 2fr تُعرّف صفّين (200px و 1fr) وعمودين (1fr و 2fr). تذكّر: «الصفوف أولًا ثم الأعمدة» — وهو عكس حدس كتابة الأعمدة وحدها — وتحقق من النتيجة في المتصفح.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
مسارات أعمدة Grid
تُعرّف بنية أعمدة grid.
التدفق التلقائي لـ Grid
يتحكم في الاتجاه الذي تُوضع به عناصر grid تلقائيًا.
