تخطيط الشبكة (CSS Grid)
يعتبر نظام Grid أقوى نظام لتخطيط صفحات الويب ثنائية الأبعاد (صفوف وأعمدة معاً) بدلاً من البنية أحادية البعد (Flexbox).
1. تعريف الأعمدة (Columns & fr unit)
وحدة fr تمثل جزءاً من المساحة المتبقية.
المعاينة
ثلاثة أعمدة متساوية (1fr 1fr 1fr):
1
2
3
العمود الأوسط يأخذ ضعف المساحة (1fr 2fr 1fr):
1
2
3
شرح الكود:
هذا المثال يوضح التطبيق العملي للخصائص المذكورة أعلاه في CSS.
2. الشبكة المتجاوبة السحرية (auto-fit & minmax)
تتيح لك إنشاء بطاقات تتجاوب تلقائياً مع الشاشة بدون أي Media Queries!
المعاينة
Card
Card
Card
Card
Card
Card
شرح الكود:
repeat(auto-fit, minmax(150px, 1fr))- المعنى: قم بتكرار الأعمدة تلقائياً (auto-fit)، بحيث لا يقل عرض العمود أبداً عن 150px، ويتمدد كحد أقصى ليأخذ 1fr (بقية المساحة).
- قم بتصغير شاشة المتصفح وستلاحظ أن البطاقات تنزل للأسفل تلقائياً!
3. دمج الأعمدة والصفوف (Spanning)
يمكن للعنصر الواحد أن يمتد ليشغل أكثر من عمود أو صف.
المعاينة
يمتد 3 أعمدة (grid-column: 1 / span 3)
يمتد صفين (grid-row: 1 / span 2)
عادي
عادي
عادي
شرح الكود:
هذا المثال يوضح التطبيق العملي للخصائص المذكورة أعلاه في CSS.