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

حاوية Grid في CSS

مقدمة Grid حوّلت الآباء إلى شبكات. هذا الدرس يبقى على الحاوية: عرّف المسارات، ضع gap، حاذي العناصر داخل الخلايا، وعبّئ الشبكة حين يبقى فضاء حر. امتداد العناصر والمناطق المسماة تنتظر درسي Grid Items وGrid Areas.

صندوق أدوات حاوية grid

📊 حاوية grid بنظرة واحدة

خاصية	المهمة اليومية
`grid-template-columns`	تحدد أحجام مسارات الأعمدة
`grid-template-rows`	تحدد أحجام مسارات الصفوف
`gap`	الفراغات بين المسارات
`justify-items` / `align-items`	يحاذيان كل عنصر داخل خليته (محور inline / block)
`justify-content` / `align-content`	يموضعان الشبكة كلها حين تكون أصغر من الحاوية
`grid-auto-flow`	يتحكم بترتيب التعبئة التلقائية (row أو column)

ارسم المسارات أولًا. ثم قرر كيف تحاذي الخلايا محتواها، وبعدها فقط كيف يتصرف الفضاء المتبقي حول الشبكة كلها.

مسارات القالب — أعمدة وصفوف

grid-template-columns وgrid-template-rows يرسمان الشبكة. امزج fr والأطوال وrepeat() للوحات اليومية.

أعمدة وصفوف معًا

css

.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}

gap — أبقِ الفراغات صادقة

gap (أو row-gap / column-gap) يباعد المسارات دون حيل هوامش على كل ابن.

Gap على الحاوية

css

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

justify-items وalign-items — داخل الخلية

هذان يحاذيان كل عنصر داخل خليته. justify-items على محور inline وalign-items على محور block. لا تخلطهما بتعبئة المحتوى.

توسيط العناصر في الخلايا

css

.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}

justify-content وalign-content — تعبئة الشبكة

حين تكون المسارات أصغر من الحاوية، خصائص content تحرّك أو تباعد الشبكة كلها. مفيد للوحات أيقونات لا يجب أن تمتد إلى الأبد.

تعبئة الشبكة في الفضاء الحر

css

.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}

عادة هادئة لحاوية grid

قالب الأعمدة والصفوف أولًا، ثم gap، ثم محاذاة العناصر داخل الخلايا، ثم تعبئة content إن بقي فضاء. ألقِ نظرة على grid-auto-flow حين يهم ترتيب الوضع التلقائي. اترك الامتداد وأرقام الخطوط والمناطق المسماة لدروس Grid التالية.

هيكل حاوية مسمّى

css

.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}

جرّب بنفسك

ابنِ لوحة بثلاثة أعمدة 1fr وصفوف auto 1fr auto.
أضف gap: 1rem.
وسّط محتوى الخلايا بـjustify-items وalign-items.
عبّئ لوحة بمسارات ثابتة بـjustify-content: space-between.
اكتب خاصية واحدة ستدّخرها لـGrid Items أو Grid Areas.

أخطاء شائعة

خلط justify-items (داخل الخلايا) مع justify-content (الشبكة كلها)
وضع span العنصر أو أسماء المناطق على الحاوية مبكرًا
تعريف الأعمدة فقط والتعجب من ارتفاعات صفوف عشوائية
جلب عادات grow من Flex إلى حاوية grid
اعتبار هذا الدرس وحدة Areas كاملة

خلاصة

خصائص حاوية grid تعرّف المسارات والفراغات والمحاذاة
grid-template-columns / rows ترسم الشبكة
justify-items / align-items تحاذيان المحتوى داخل الخلايا
justify-content / align-content تعبئان الشبكة في الفضاء الحر
امتداد العناصر والمناطق المسماة تأتي في دروس Grid التالية

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

جاهز للبدء

اختبر معرفتك

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

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

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

اللغة