Grid المتجاوب في CSS
درس مناطق Grid علّمك تسمية خريطة الصفحة. Grid المتجاوب يسأل: ماذا يحدث عندما يضيق العرض؟ هل تنهار الأعمدة؟ هل ينزل الشريط الجانبي تحت الرأس؟ هل تتدفق البطاقات دون شجرة HTML ثانية؟ تتعلّم أنماط breakpoint هادئة — وحدة التصميم المتجاوب تأتي لاحقًا.
صندوق أدوات grid المتجاوب
📊 grid المتجاوب بنظرة واحدة
| أداة | المهمة اليومية |
|---|---|
grid-template-columns |
تبديل قوائم المسارات داخل media query (مثلاً عمودان → واحد) |
grid-template-areas |
إعادة رسم الخريطة المسماة عندما يكون التكديس أفضل من الجنب إلى جنب |
repeat(auto-fit, minmax(...)) |
أعمدة بطاقات مرنة دون breakpoint لكل عدد |
| Media query | تطبيق تغييرات grid فقط عندما يطابق العرض |
gap |
يحافظ على الإيقاع عند تغيير المسارات أو الخريطة |
| تجنب HTML إضافي لكل عرض | نفس DOM؛ CSS ينقل التخطيط |
ابدأ من grid تثق به على الشاشة العريضة. عند breakpoint واضح واحد غيّر الأعمدة أو الصفوف أو خريطة المناطق — لا كل خاصية دفعة واحدة. الأسماء من الدرس السابق تجعل إعادة الرسم مقروءة.
الأعمدة عند breakpoint
عندما يجب أن يصبح غلاف عمودين عمودًا واحدًا على الهاتف، غيّر grid-template-columns داخل media query.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}
أعد رسم خريطة المناطق على الشاشات الضيقة
خرائط header / aside / main جنبًا إلى جنب غالبًا تحتاج كتلة جديدة من grid-template-areas عندما ينزل الشريط الجانبي تحت الرأس. أعد كتابة الصفوف بين علامات الاقتباس؛ ابقِ المناطق مستطيلة.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}
auto-fit و minmax للوح البطاقات
للمعارض ولوحات المعلومات، repeat(auto-fit, minmax(...)) يتيح ظهور الأعمدة والالتفاف حسب المساحة — غالبًا بـ breakpoints يدوية أقل.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
العرض الضيق ليس لغة تخطيط مختلفة — نفس أدوات grid، قوائم مسارات أو خرائط مختلفة. فضّل تحريك CSS على تكرار markup «للموبايل».
عادة grid متجاوبة هادئة
breakpoint رئيسي واحد أولًا. اقرن تغيير الأعمدة بإعادة الخريطة عندما تساعد التسميات. استخدم auto-fit حيث يجب أن يتغير عدد البطاقات. حافظ على ترتيب DOM منطقيًا. أنظمة breakpoint الكاملة تأتي في وحدة التصميم المتجاوب.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}
@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}
@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}
جرّب بنفسك
- حوّل غلاف عمودين إلى عمود واحد تحت
max-width: 40rem. - أعد كتابة خريطة header / aside / main / footer للتكديس الضيق.
- ابنِ صف بطاقات بـ
repeat(auto-fit, minmax(14rem, 1fr)). - أضف breakpoint هادئًا واحدًا.
- احتفظ بشجرة HTML واحدة؛ الدرس التالي هو التصميم المتجاوب.
أخطاء شائعة
- تصغير المسارات إلى الأبد بدل تغيير الأعمدة أو التكديس
- بناء HTML «موبايل» منفصل بدل تحديث grid في CSS
- عدد خلايا غير متطابق عند إعادة صفوف
grid-template-areas - media query عملاقة تعيد كل خاصية grid
- اعتبار هذا الدرس دورة التصميم المتجاوب كاملة
ملخص
- grid المتجاوب يكيّف الأعمدة والخرائط ولوح auto-fit مع العرض
- media queries تحدّ تغييرات المسارات والخرائط
- المناطق المسماة تُقرن جيدًا بإعادة الخريطة على الشاشات الصغيرة
- breakpoint هادئ وشجرة DOM واحدة
- وحدة Grid (490–530) اكتملت؛ وحدة التصميم المتجاوب تلي
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى