جاري التحميل...
جاري التحميل...
التخطيط الشبكي + المحاذاة المتقدمة
CSS Grid Layout هو نظام تخطيط ثنائي الأبعاد في CSS يتيح لك تنظيم العناصر في صفوف وأعمدة في نفس الوقت. يتم تفعيله بإضافة display: grid إلى الحاوية.
على عكس Flexbox الذي يعمل على محور واحد، يوفر Grid تحكماً كاملاً في كلا المحورين (أفقي وعمودي) في نفس الوقت. هذا يجعله مثالياً لإنشاء تخطيطات معقدة مثل صفحات الويب الكاملة ولوحات المعلومات وشبكات الأعمدة المتعددة.
💡 ملاحظة مهمة:
عند تطبيق display: grid على حاوية، تصبح العناصر المباشرة تلقائياً عناصر شبكة. العناصر المتداخلة لن تتأثر ما لم يتم تعريفها أيضاً كحاويات شبكة.
يوفر CSS Grid حلولاً قوية لمشاكل التخطيط التي واجهها المطورون لسنوات:
قبل CSS Grid، واجه المطورون مشاكل كبيرة في إنشاء تخطيطات ثنائية الأبعاد:
✅ المشكلة 1: تخطيط الصفحة الكاملة:
إنشاء تخطيط مع رأس وشريط جانبي ومحتوى رئيسي وتذييل كان يتطلب CSS معقداً مع float وحسابات العرض.
✅ المشكلة 2: شبكات الأعمدة المتعددة:
إنشاء شبكة بطاقات متجاوبة بعدد أعمدة متغير كان يتطلب حسابات يدوية معقدة.
✅ المشكلة 3: تراكب العناصر:
جعل عنصر يراكب آخر كان يتطلب position: absolute وحسابات transform معقدة.
تخيل أن لديك لوح شطرنج فارغاً. تحدد عدد الصفوف والأعمدة، ثم تضع القطع في أماكنها المحددة. يعمل CSS Grid بنفس الطريقة:
🔍 القاعدة الذهبية:
الخصائص المضافة إلى الحاوية تتحكم في الشبكة بالكامل. الخصائص المضافة إلى عنصر تتحكم فقط في موقع ذلك العنصر.
عند تطبيق CSS Grid على حاوية، يتبع المتصفح هذه الخطوات:
ما الفرق بين auto-fit و auto-fill في دالة repeat()؟
متى تستخدم CSS Grid بدلاً من Flexbox؟
أنشئ لوحة معلومات برأس وشريط جانبي ومحتوى رئيسي وتذييل باستخدام CSS Grid مع مناطق مسماة.
الحل:
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* أضف تنسيقات إضافية هنا */حاوية Grid:
display: grid - تفعيل Gridgrid-template-columns - تحديد مسارات الأعمدةgrid-template-rows - تحديد مسارات الصفوفgrid-template-areas - مناطق التخطيط المسماةgap - المسافة بين خلايا الشبكةgrid-auto-flow - row | column | denseعناصر Grid:
grid-column - start / end | span Ngrid-row - start / end | span Ngrid-area - اسم | row-start / col-startjustify-self - محاذاة عنصر واحد أفقياًalign-self - محاذاة عنصر واحد عمودياًأنماط شائعة:
/* بطاقات متجاوبة */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* توسيط */
display: grid; place-items: center;
/* شريط جانبي + محتوى */
grid-template-columns: 250px 1fr;Grid مقابل Flexbox: