HTML & CSS • المستوى الثالث • الدرس 3
العودة لفهرس المستوىشبكات CSS Grid والصفوف والأعمدة
أهداف الدرس العلمية
- فهم نظام التنسيق الشبكي ثنائي الأبعاد (CSS Grid Layout) وقوته في بناء الواجهات.
- تحديد أعداد وأحجام الأعمدة باستخدام الخاصية
grid-template-columns. - استخدام وحدة الكسر المرنة
fr(Fraction Unit) لتوزيع المساحة التلقائي. - إضافة مسافات بين خلايا الشبكة عبر الخاصية
gap.
1. الفرق بين Flexbox و CSS Grid
بينما يعمل Flexbox في اتجاه واحد (إما أفقياً أو عمودياً)، يُعتبر CSS Grid نظاماً ثنائي الأبعاد يعمل على الصفوف والأعمدة معاً في نفس الوقت، وهو الأنسب لبناء تخطيطات الصفحات الكبيرة وشبكات المنتجات.
2. إنشاء الأعمدة ووحدة fr (Fraction Unit)
لتفعيل الشبكة نستخدم display: grid;، ثم نحدد الأعمدة بالخاصية grid-template-columns:
grid-template-columns: 200px 200px;إنشاء عمودين ثابتين بعرض 200px لكل منهما.
grid-template-columns: 1fr 1fr 1fr;تقسيم الشاشة إلى 3 أعمدة متساوية المساحة تماماً بفضل وحدة الكسر المرنة fr.
grid-template-columns: repeat(3, 1fr);طريقة اختصار بكتابة الدالة repeat لتكرار 3 أعمدة متساوية.
مثال إنشاء شبكة من عمودين وفجوة:
css
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
} التطبيق العملي المباشر
تحدي الدرس الثالث: إنشاء شبكة من عمودين متساويين
قم بكتابة قواعد CSS داخل الصنف .grid-container لتطبيق الشروط التالية:
- تفعيل نظام شبكة Grid بواسطة:
display: grid;. - إنشاء عمودين متساويين باستخدام وحدة الكسر:
grid-template-columns: 1fr 1fr;أوrepeat(2, 1fr);. - إضافة مسافة وفجوة بين عناصر الشبكة بمقدار:
gap: 15px;.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 41, Col 1UTF-8Spaces: 2
795 chars