تعلّم CSS من الصفرالدرس 6 من 8
CSS Grid: تخطيط الصفحات بالصفوف والأعمدة
تعلم CSS Grid: grid-template-columns ووحدة fr وrepeat وminmax والمسافات gap وامتداد العناصر على عدة أعمدة وتسمية المناطق grid-template-areas، مع تخطيط صفحة كامل.
محتويات الدرس
Grid نظام تخطيط ثنائي الأبعاد: تحدد الأعمدة والصفوف، وتضع العناصر فيها كما تريد.
أول شبكة
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
fr وحدة «جزء من المساحة المتاحة». 1fr 2fr يعني أن العمود الثاني ضعف الأول.
repeat وminmax: شبكة متجاوبة دون media query
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
هذا السطر السحري يقول: «ضع أكبر عدد ممكن من الأعمدة، كل عمود 140px على الأقل». صغّر الشاشة وسترى الأعمدة تقل تلقائيًا.
عنصر يمتد على عدة أعمدة
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
تخطيط صفحة كامل بالمناطق
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
grid-template-areas يرسم التخطيط كأنه خريطة. وفي الشاشات الصغيرة نعيد رسمها في عمود واحد.
Grid أم Flexbox؟
| استخدم | عندما |
|---|---|
| Grid | تخطيط الصفحة، شبكة بطاقات، صفوف وأعمدة معًا |
| Flexbox | شريط تنقل، أزرار في صف، توسيط عنصر |
غالبًا تستخدم Grid للتخطيط العام، وFlexbox داخل كل جزء.
الأسئلة الشائعة
هل Grid مدعوم في كل المتصفحات؟
نعم، كل المتصفحات الحديثة تدعمه منذ سنوات.
ما الفرق بين auto-fit وauto-fill؟
auto-fit يمدد العناصر لتملأ السطر إن كانت قليلة، وauto-fill يترك أعمدة فارغة. auto-fit هو الأكثر استخدامًا.
الخلاصة
display: gridوgrid-template-columnsمع وحدةfr.repeat(auto-fit, minmax(…, 1fr))لشبكة متجاوبة تلقائيًا.grid-template-areasلرسم تخطيط الصفحة بالأسماء.