Grid في CSS
رتّب Flexbox العناصر في اتجاه واحد. CSS Grid يفتح الفصل التالي: الصفوف والأعمدة معًا. فعّل display: grid، ارسم المسارات، أضف gap، ثم تعمّق لاحقًا في دروس Grid Container وItems وAreas وResponsive.
صندوق أدوات البدء مع Grid
📊 Grid في لمحة
| الفكرة | الدور اليومي |
|---|---|
| حاوية Grid | الأب الذي يحمل display: grid (أو inline-grid) |
| عناصر Grid | الأبناء المباشرون الذين يجلسون في الشبكة |
| المسارات (tracks) | الصفوف والأعمدة التي تشكّل الشبكة |
| الخلايا / المناطق | أماكن هبوط العناصر (المناطق في درس لاحق) |
gap |
فواصل بين المسارات دون حيل الهامش |
وحدة fr |
مشاركة المساحة المتبقية بين المسارات (معاينة) |
تخيّل Grid كورق مربعات للصفحة: ترسم الأعمدة والصفوف أولًا، ثم تسقط المحتوى في الخلايا. يبقى Flexbox ممتازًا لأشرطة الأدوات والتجمعات أحادية المحور.
display: grid — فعّل الشبكة
ضع display: grid على الأب. يصبح الأبناء عناصر شبكة تلقائيًا — لا حاجة لصنف إضافي في النموذج الأساسي.
.board {
display: grid;
}
الأعمدة أولًا — قالب بسيط
grid-template-columns يعرّف المسارات العمودية. ثلاثة أعمدة متساوية رسم هادئ للبطاقات أو البلاطات.
.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
gap — فواصل صادقة
استخدم gap (أو row-gap / column-gap) ليبقى التباعد متسقًا عند إعادة تدفق المسارات. فضّل gap على رشّ الهوامش على كل ابن.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
مصفوفة بطاقات صغيرة
نفس فكرة رسم المعرض — مسارات متساوية مع gap — لكنك تتحدث الآن بلغة Grid، لا flex-wrap وحدها.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cards__item {
min-height: 8rem;
}
fr — قسّم المساحة المتبقية
وحدة fr تقسم المساحة الحرة بين المسارات. 2fr 1fr يجعل العمود الأول ضعف الثاني عندما تبقى مساحة.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
عادة Grid هادئة
استخدم Grid لهياكل الصفحة ثنائية الأبعاد والمصفوفات. استخدم Flexbox للصفوف أحادية البعد. ابدأ بـ display: grid وقالب أعمدة بسيط وgap. اترك التعمق في التموضع التلقائي والمناطق المسماة ومسارات Grid المتجاوبة للدروس التالية.
.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
.page__main,
.page__rail {
min-width: 0;
}
جرّب بنفسك
- أنشئ حاوية بـ
display: grid. - عيّن
grid-template-columns: repeat(3, 1fr). - أضف
gap: 1remبين المسارات. - جرّب
2fr 1frلهيكل رئيسي + شريط جانبي. - اكتب جملة واحدة: متى تختار Flexbox بدلًا من ذلك؟
أخطاء شائعة
- وضع
display: gridعلى كل عنصر بلا حاجة تخطيط - توقع أن يحلّ التفاف Flexbox وحده محل Grid ثنائي الأبعاد الحقيقي
- تخطي
gapومصارعة هوامش الأبناء إلى الأبد - القفز إلى المناطق المسماة قبل أن تبدو المسارات الأساسية طبيعية
- بناء هياكل الصفحة كاملة بـ float حين يناسبها Grid أكثر
ملخص
- CSS Grid ثنائي الأبعاد: صفوف وأعمدة معًا
display: gridيجعل الأبناء عناصر شبكةgrid-template-columns(والصفوف لاحقًا) تعرّف المساراتgapوfrيبقيان الفواصل والمساحة الحرة هادئة- دروس أعمق عن الحاوية والعنصر والمنطقة وGrid المتجاوب تأتي لاحقًا
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى