CSS: حاوية Grid CSS

آخر تحديث: 2026-10-13

Grid CSS هو نظام تخطيط ثنائي البُعد قوي يتيح لك التحكم في الصفوف والأعمدة في وقت واحد.

خصائص هذا القسم: grid-template-columns grid-template-rows gap grid-template-areas

1. خصائص حاوية Grid

(1) مرجع سريع

الخاصية	القيم	الغرض
`display: grid`	—	إنشاء حاوية شبكة
`grid-template-columns`	`100px 1fr 2fr`، `repeat(3, 1fr)`	تعريفات الأعمدة
`grid-template-rows`	`100px auto`، `repeat(3, 100px)`	تعريفات الصفوف
`gap`	`10px`، `10px 20px`	فجوة بين العناصر
`grid-template-areas`	`"header header" "main aside"`	مناطق شبكة مسماة

2. وحدة fr

وحدة fr توزع المساحة المتبقية بشكل متناسب:

▶ مثال

▶ جرّب الكود

3. repeat()

دالة repeat() تُقلل التكرار:

▶ مثال

▶ جرّب الكود

4. minmax() + auto-fill/auto-fit

تُنشئ شبكات متجاوبة تُعدّل عدد الأعمدة تلقائياً:

▶ مثال

▶ جرّب الكود

auto-fill مقابل auto-fit:

auto-fill: يُنشئ أكبر عدد ممكن من الأعمدة التي تناسب، حتى لو كانت فارغة
auto-fit: مثل auto-fill، لكن يطوي الأعمدة الفارغة

5. grid-template-areas

حدد التخطيط بمناطق مسمى:

▶ مثال

▶ جرّب الكود

خصائص هذا القسم: grid-template-columns grid-template-rows gap grid-template-areas

❓ أسئلة شائعة

س كيف أختار بين Grid و Flexbox؟

ج أحادي البُعد (صف أو عمود واحد) يستخدم Flexbox، ثنائي البُعد (تحكم متزامن في صف وعمود) يستخدم Grid. معظم الصفحات تستخدم كليهما: Grid لهيكل الصفحة العام، Flexbox للترتيبات المحلية. استخدامهما معاً في صفحة واحدة طبيعي تماماً.

س ما الفرق بين وحدات fr والنسب المئوية؟

ج fr توزع المساحة المتبقية، النسب المئوية توزع العرض الكلي. مع الفجوة، fr تطرح الفجوة تلقائياً قبل حساب النسب، النسب المئوية لا تفعل ذلك. 1fr 1fr 1fr مع فجوة لا تزال أثلاثاً مثالية، بينما 33.33% 33.33% 33.33% تفيض.

س كيف أستخدم grid-template-areas؟

ج حدد التخطيط بمناطق مسمى: grid-template-areas: "header header" "sidebar main" "footer footer"; ثم اسناد الأبناء بـ grid-area: header. لتغيير التخطيط، فقط اضبط قالب النص — لا حاجة لإعادة موضع الأبناء.

📖 ملخص

Grid هو نظام تخطيط ثنائي البُعد قوي
حدد بنية الشبكة بـ grid-template-columns وgrid-template-rows
استخدم وحدة fr لتوزيع المساحة المتناسب
أنشئ شبكات مرنة بـ repeat() وminmax()
gap تُعيّن مسافة؛ auto-fill/auto-fit مع minmax تُنشئ شبكات متجاوبة حقاً

📝 تمارين

أساسي

أنشئ حاوية شبكة 3×3، كل خلية 100px×100px، فجوة 10px.
استخدم وحدة 1fr لتخطيط "عمودين" (يسار 1fr، يمين 3fr).

متوسط

أنشئ شبكة بطاقات متكيفة بـ repeat(auto-fill, minmax(150px, 1fr)) — حجم المتصفح لرؤية تغييرات الأعمدة.
أنشئ تخطيط "ثلاثة صفوف وعمودين كلاسيكي": ترويسة (تمتد لعمودين)، قائمة يسار، محتوى يمين، تذييل (تمتد لعمودين).

تحدٍ

أنشئ معرض صور متجاوب: سطح المكتب 4 أعمدة، جهاز لوحي 2 أعمدة، محمول عمود واحد، باستخدام auto-fill + minmax.
استخدم grid-template-areas لتخطيط مدونة كاملة (ترويسة، تنقل، محتوى رئيسي، شريط جانبي، تذييل).

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن