HTML & CSS • المستوى الثالث • الدرس 4
العودة لفهرس المستوىالتخطيطات المتقدمة بـ Grid (Auto-fit & Minmax)
أهداف الدرس العلمية
- إنشاء شبكة تلقائية التكيف والمتجاوبة بدون استخدام Media Queries.
- فهم دالة
minmax()لتحديد الحد الأدنى والأقصى لعرض العمود. - استخدام الخاصية
auto-fitلملء المساحة المتاحة ذكياً بحسب شاشة المستخدم. - تطبيق التخطيطات العصرية المتجاوبة لبطاقات المنتجات والمحتوى.
1. الشبكة الذكية والمتجاوبة
من أقوى ميزات CSS Grid إمكانية جعل الشاشة متجاوبة وتُغيّر عدد الأعمدة تلقائياً بناءً على حجم شاشة الزائر (من هاتف إلى حاسوب) بسطر كود واحد مدمج — بدون الحاجة لكتابة Media Queries.
2. دمج auto-fit مع minmax()
نحقق هذا التكيف بتركيبة تجمع الدالتين بالشكل التالي:
minmax(150px, 1fr)تضمن ألا يقل عرض أي عمود عن 150px، وفي حال توفر مساحة إضافية يتمدد ليأخذ الحصة المتاحة 1fr.
auto-fitتجبر الشبكة على حساب عدد الأعمدة التي يمكن احتواؤها في السطر التلقائي ورصفها بجانب بعضها.
التركيب القياسي للشبكة المتجاوبة:
css
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
} التطبيق العملي المباشر
تحدي الدرس الرابع: إنشاء شبكة بطاقات متجاوبة تلقائياً
قم بكتابة قواعد CSS داخل الصنف .auto-grid لتطبيق الشروط التالية:
- تفعيل نظام Grid باستخدام:
display: grid;. - إنشاء أعمدة متجاوبة تلقائياً بحيث يكون الحد الأدنى لعرض كل بطاقة 150px والحد الأقصى 1fr عبر:
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - إضافة فجوة مسافة بين البطاقات بمقدار:
gap: 20px;.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 44, Col 1UTF-8Spaces: 2
867 chars