CSS: عناصر Grid CSS

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

خصائص عناصر Grid تتيح لك التحكم الدقيق في كيفية وضع الأبناء داخل حاوية شبكة.

خصائص هذا القسم: grid-column grid-row grid-area justify-self align-self place-self justify-items align-items grid-template-areas

1. خصائص عناصر Grid

(1) مرجع سريع

الخاصية	القيم	الغرض
`grid-column`	`1 / 3`، `span 2`	موضع العمود
`grid-row`	`1 / 3`، `span 2`	موضع الصف
`grid-area`	`header`، `1 / 2 / 3 / 4`	منطقة مسمى أو موضع خط
`justify-self`	`start`، `end`، `center`، `stretch`	محاذاة أفقية داخل الخلية
`align-self`	`start`، `end`، `center`، `stretch`	محاذاة عمودية داخل الخلية
`place-self`	`center`، `start end`	اختصار لـ justify + align

2. grid-column و grid-row

يتحكمان في مكان بداية ونهاية العناصر في الشبكة:

▶ مثال

▶ جرّب الكود

(1) عنصر بعرض كامل

استخدم grid-column: 1 / -1 لامتداد جميع الأعمدة:

▶ مثال

▶ جرّب الكود

3. justify-self / align-self

يتحكمان في المحاذاة داخل خلايا فردية:

▶ مثال

▶ جرّب الكود

4. تراكب Grid

عناصر Grid يمكن أن تتراكب — العناصر اللاحقة تظهر في الأعلى:

▶ مثال

▶ جرّب الكود

خصائص هذا القسم: grid-column grid-row grid-area justify-self align-self place-self justify-items align-items grid-template-areas

❓ أسئلة شائعة

س ماذا يعني grid-column: 1 / -1؟

ج يعني "من خط الشبكة 1 إلى خط الشبكة الأخير (-1 هو رقم الخط الأخير)" — يمتد الصف بالكامل. مثالي للترويسات أو الفواصل بعرض كامل without الحاجة لمعرفة عدد الأعمدة الكلي.

س هل يمكن لعناصر Grid أن تتراكب؟

ج نعم. Grid يتيح للعناصرشغل نفس منطقة الشبكة — العناصر اللاحقة تغطي السابقة. استخدم هذا لتأثيرات التراكب مثل نص على صور. تحكم في التكديس بـ z-index.

س كيف أستخدم كلمة span؟

ج grid-column: span 2 يعني "يمتد لعمودين" — أكثر بديهية من كتابة أرقام خطوط الشبكة. لا حاجة لمعرفة أي خط يبدأ منه؛ المتصفح يحسب تلقائياً. مفيد بشكل خاص في السيناريوهات المتجاوبة where لا تعرف العدد الدقيق للأعمدة.

📖 ملخص

موضع عناصر Grid مرن جداً — حدد بدقة خطوط بداية/نهاية الشبكة، أو استخدم كلمة span لامتداد عدة صفوف/أعمدة
داخل الخلايا، justify-items/align-items يتحكمان في المحاذاة العامة، justify-self/align-self يتحكمان في عناصر فردية
إذا كانت أرقام الخطوط صعبة الحفظ، جرب grid-template-areas لمناطق مسمى — أكثر بديهية

📝 تمارين

أنشئ شبكة 4×4، ضع عنصراً يمتد لعمودين وصفين بدءاً من العمود 2، الصف 2.
استخدم grid-template-areas لتخطيط صفحة كاملة: ترويسة (تمتد لعمودين)، شريط جانبي، منطقة محتوى، تذييل (تمتد لعمودين).
وسّط جميع العناصر أفقياً وعمودياً في حاوية شبكة (باستخدام place-items: center).
اجعل عنصر الشبكة الثالث يحاذي الزاوية السفلية اليمنى لخليله (باستخدام justify-self وalign-self).

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

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

من نحن