جاري التحميل...

عناصر Grid في CSS

درس حاوية Grid قاد الأب — المسارات وgap وافتراضات الخلية. عناصر grid تسأل سؤالًا آخر: كيف يدّعي كل طفل الخطوط ويمتد عبر المسارات ويغيّر المحاذاة داخل خليته؟ أتقن التموضع على الخطوط قبل المناطق المسماة.

صندوق أدوات عناصر grid

📊 عناصر grid بنظرة واحدة

خاصية	المهمة اليومية
`grid-column`	تضع خطي بداية/نهاية العمود للعنصر (اختصار)
`grid-row`	تضع خطي بداية/نهاية الصف للعنصر (اختصار)
`span`	تمدّ العنصر عبر N مسارًا من خط البداية
`justify-self`	تلغي `justify-items` لعنصر واحد (محور inline)
`align-self`	تلغي `align-items` لعنصر واحد (محور block)
`place-self`	اختصار لـ `align-self` + `justify-self`

تُرقَّم خطوط grid من حافة البداية. عنصر يبدأ عند الخط 1 وينتهي عند الخط 3 يغطي مساري عمود. فكّر بالخطوط أولًا؛ المناطق المسماة تأتي لاحقًا.

grid-column — اجلس على خطوط الأعمدة

grid-column: start / end تثبّت الطفل بين خطوط الأعمدة. الشريط الجانبي غالبًا على المسار الأول بينما اللوحة الرئيسية تأخذ الباقي.

شريط جانبي على خطوط الأعمدة

css

.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}

.board__aside {
grid-column: 1 / 2;
}

.board__main {
grid-column: 2 / 3;
}

span — امتد عبر المسارات

span يعدّ المسارات من خط البداية. بطل يحتاج العرض كاملًا على لوحة من ثلاثة أعمدة غالبًا يستخدم grid-column: 1 / span 3.

البطل يغطي ثلاثة أعمدة

css

.hero {
grid-column: 1 / span 3;
}

grid-row — اجلس على خطوط الصفوف

نفس الفكرة على محور block. ثبّت لافتة في الشريط العلوي، أو دع بطاقة طويلة تحتل مساري صف بـ span.

لافتة على خطوط الصفوف

css

.banner {
grid-row: 1 / 2;
}

.tall-card {
grid-row: 2 / span 2;
}

العمود والصف معًا

اجمع الاثنين حين يحتاج طفل مستطيلًا واضحًا — مثل بلاطة مميزة تغطي عمودين وصفًا واحدًا.

بلاطة مميزة مع span

css

.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}

place-self — عنصر واحد ومحاذاة خلية مختلفة

ألغِ justify-items / align-items للحاوية لطفل واحد. place-self: center اختصار هادئ حين يجب أن يتطابق المحوران.

تجاوز بـ place-self

css

.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}

.board .badge {
place-self: center;
}

عادة هادئة لعنصر grid

موضع أولًا بخطوط العمود والصف، استخدم span حين يغطي الطفل عدة مسارات، ثم حسّن المحاذاة الفردية بـ place-self. أبقِ ترتيب DOM معقولًا — تجنّب حيل order التي تبعثر تركيز لوحة المفاتيح. اترك مناطق القالب المسماة لدرس Grid Areas.

أدوار عنصر مسماة

css

.shell__hero {
grid-column: 1 / -1;
}

.shell__aside {
grid-column: 1 / 2;
align-self: start;
}

.shell__main {
grid-column: 2 / 3;
}

جرّب بنفسك

ابنِ لوحة بعمودين؛ ضع aside على grid-column: 1 / 2 وmain على 2 / 3.
أضف بطلًا بثلاثة أعمدة بـ grid-column: 1 / span 3.
ثبّت لافتة بـ grid-row: 1 / 2.
مدّ بلاطة مميزة عبر عمودين وصف واحد.
وسّط شارة بـ place-self: center ولاحظ المناطق المسماة للدرس التالي.

أخطاء شائعة

وضع span أو أرقام الخطوط على الحاوية بدل العنصر
نسيان أن الخطوط تبدأ من 1 وعدّ المسارات كما لو كانت خطوطًا
خلط تموضع العنصر مع تعبئة justify-content على الأب
القفز إلى grid-template-areas المسماة قبل إتقان الخطوط
إعادة ترتيب بصري بـ order وكسر ترتيب tab/المصدر

ملخص

عناصر grid تتحكم بتموضع الخطوط والامتداد والمحاذاة لكل عنصر
grid-column / grid-row تثبّتان خطي البداية والنهاية
span يمتد عبر المسارات من خط البداية
place-self (وخصائص self) تلغي محاذاة الخلية لطفل واحد
مناطق القالب المسماة تأتي في درس Grid Areas التالي

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة